initial commit

3 files changed, 148 insertions, 0 deletions

diff --git a/files/ja/mozilla/mobile/firefox_mobile_for_developers/index.html b/files/ja/mozilla/mobile/firefox_mobile_for_developers/index.html
new file mode 100644
index 0000000000..daf2fce7c9
--- /dev/null
+++ b/files/ja/mozilla/mobile/firefox_mobile_for_developers/index.html
@@ -0,0 +1,27 @@
+---
+title: Firefox Mobile for developers
+slug: Mozilla/Mobile/Firefox_Mobile_for_developers
+tags:
+  - Mobile
+  - NeedsUpdate
+translation_of: Mozilla/Mobile/Firefox_Mobile_for_developers
+---
+<h2 id="Compiling_and_testing" name="Compiling_and_testing">Compiling and testing</h2>
+<p>Instructions for building and testing Firefox Mobile can be found at <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android" rel="freelink">https://wiki.mozilla.org/Mobile/Fennec/Android</a></p>
+<h2 id="User_agent" name="User_agent">User agent</h2>
+<p>See <a href="/ja/docs/Gecko_user_agent_string_reference" title="Gecko_user_agent_string_reference">Gecko User Agent string reference</a> for details on the User-Agent headers sent by Firefox on mobile devices.  For more information about user agents, please see our article on <a href="/ja/docs/Browser_Detection_and_Cross_Browser_Support" title="Browser Detection and Cross Browser Support">Browser Detection</a>.</p>
+<h2 id="Mobile-specific_APIs" name="Mobile-specific_APIs">Mobile-specific APIs</h2>
+<p>There are some APIs that are specific to mobile, or are more useful to mobile.  They are listed below.</p>
+<h3 id="CSS_for_touch-specific_UI_elements" name="CSS_for_touch-specific_UI_elements">CSS for touch-specific UI elements</h3>
+<p>Mozilla supports the <a href="/ja/docs/CSS/Media_queries#-moz-touch-enabled" title="CSS/Media queries"><code>-moz-touch-enabled</code> CSS media query</a> that you can use to change CSS if you're on a touch device.  This is available and will work on Firefox for desktops as well, but is more likely to be useful for mobile devices.  You can use this to render larger buttons for people to press.</p>
+<h3 id="Viewport_meta_tag" name="Viewport_meta_tag">Viewport meta tag</h3>
+<p>Firefox supports the <code>viewport</code> meta tag on Mobile devices.  For details, see <a href="/ja/docs/Mobile/Viewport_meta_tag" title="Mobile/Using the viewport meta tag to improve the mobile browsing experience">Using the viewport meta tag to improve the mobile browsing experience</a>.</p>
+<p>More information on the <a href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html" title="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">viewport meta tag can be found in the Safari reference documentation</a>.</p>
+<div class="note">
+  <strong>注記:</strong> The <code>viewport</code> meta tag is ignored on desktop versions of Firefox.</div>
+<h3 id="Media_queries" name="Media_queries">Media queries</h3>
+<p><a href="/ja/docs/CSS/Media_queries" title="CSS/Media queries">CSS Media queries</a> are supported in Firefox for desktops and mobile devices.  They can be used to change layout based on screen size and are the best way to build a UI that will work on desktops and mobile devices.</p>
+<h2 id="See_also" name="See_also">関連情報</h2>
+<ul>
+  <li><a href="http://starkravingfinkle.org/blog/2009/11/fennec-mobile-optimzed-web-pages/" title="http://starkravingfinkle.org/blog/2009/11/fennec-mobile-optimzed-web-pages/">Mark Finkle on Mobile Optimized Web pages</a></li>
+</ul>
diff --git a/files/ja/mozilla/mobile/index.html b/files/ja/mozilla/mobile/index.html
new file mode 100644
index 0000000000..5d3f8c6472
--- /dev/null
+++ b/files/ja/mozilla/mobile/index.html
@@ -0,0 +1,30 @@
+---
+title: Mobile
+slug: Mozilla/Mobile
+tags:
+  - Mobile
+translation_of: Mozilla/Mobile
+---
+<h2 id="Firefox_OS" name="Firefox_OS"><a href="/en-US/docs/Archive/B2G_OS">Firefox OS</a></h2>
+
+<p>Firefox OS は Linux と Mozilla の Gecko を使ったオープンソースのモバイル OS で、その上で、ユーザーインターフェイスと HTML / CSS / JavaScript のアプリケーションが動作します。</p>
+
+<p>Firefox OS のインストール方法とアプリの開発方法については、上記文書を参照してください。</p>
+
+<h2 id="Firefox_for_Android" name="Firefox_for_Android"><a href="/docs/Mozilla/Firefox_for_Android">Andriod 版 Firefox</a></h2>
+
+<p>Android 版 Firefox は Android 端末向けの Mozilla のモバイルウェブブラウザです。最近、Android のネイティヴ UI に刷新し、より高速・よりコンパクト・よりレスポンシブになっています。そして、カメラや電話帳などの端末機能にアクセスするためのより強力な API をサポートしています。</p>
+
+<p>Android 版 Firefox の作成方法に関するヘルプや、デバイス API の使い方、モバイル add-on の作り方については、上記文書を参照してください。</p>
+
+<h2 id="Firefox_for_iOS" name="Firefox_for_iOS"><a href="/docs/Mozilla/Firefox_for_iOS">iOS 版 Firefox</a></h2>
+
+<p>iOS 版 Firefox は iOS 端末向けに近々リリース予定の Mozilla のモバイルウェブブラウザです。AppStore の制約から、Gecko ではなく iOS が提供している WebView を利用しています。</p>
+
+<p>iOS 版 Firefox についてのヘルプや、他の iOS アプリとの統合方法については上記文書を参照してください。</p>
+
+<h2 id="Mobile_web_development" name="Mobile_web_development"><a href="/docs/Web/Guide/Mobile">モバイルウェブ開発</a></h2>
+
+<p>モバイル端末はデスクトップやラップトップとハードウェアの特徴が異なります。そしてハードウェアを扱うための API の多くは標準化へ向けて作業中です。</p>
+
+<p>モバイル端末上で動作するようにウェブサイトを開発する用法や、端末の性能を発揮するための作り方については上記文書を参照してください。そしてブラウザーごとに挙動が異なることも学んで臭い。</p>
diff --git a/files/ja/mozilla/mobile/viewport_meta_tag/index.html b/files/ja/mozilla/mobile/viewport_meta_tag/index.html
new file mode 100644
index 0000000000..04ab7c37b6
--- /dev/null
+++ b/files/ja/mozilla/mobile/viewport_meta_tag/index.html
@@ -0,0 +1,91 @@
+---
+title: モバイルブラウザでのレイアウトを制御するために meta タグの viewport を使う
+slug: Mozilla/Mobile/Viewport_meta_tag
+translation_of: Mozilla/Mobile/Viewport_meta_tag
+---
+<p><a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec">Mobile Firefox (Fennec)</a> 1.1 の来たるリリースでは、 <a href="/en-US/docs/Web/HTML/Element/meta#Attributes"><code>&lt;meta name="viewport"&gt;</code></a> タグのサポートを強化しています。Fennec の前のバージョンでは、width、height、そして initial-scale といったビューポートのプロパティをサポートしていました。しかし、iPhone や Android ブラウザ用につくられたいくつかのサイトでは<a class="external" href="http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag/">不具合</a>が出ていました。新しいバージョンでは Mobile Safari の同様のプロパティをサポートしました。また Fennec では、異なるサイズと解像度の画面でも、モバイルサイトをより同じように表示できるように変更しました。</p>
+
+<p class="caption">touch.facebook.com のこれまでの表示：</p>
+
+<p class="figure"><img alt="05-11-fennec-meta-viewport-2.png" class="default internal" src="/@api/deki/files/4371/=05-11-fennec-meta-viewport-2.png"></p>
+
+<p class="caption">touch.facebook.com の新しい表示：</p>
+
+<p class="figure"><img alt="05-11-fennec-meta-viewport-1.png" class="default internal" src="/@api/deki/files/4372/=05-11-fennec-meta-viewport-1.png"></p>
+
+<p>あなたは、これらの変更点を、Maemo、Windows、Mac、そして Linux のそれぞれで、<a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mobile-1.9.2/">Fennec 1.1</a> の最新版と、<a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mobile-trunk/">Trunk</a> の最新版のコードからビルドした版で、確認することができます。</p>
+
+<h2 id="背景">背景</h2>
+
+<p>Fennec のようなモバイルブラウザは、視覚的な「窓」（＝ビューポート）のなかに、ページとして表示するので、ページはたいていは画面よりも幅が広いものの、モバイルブラウザは狭い窓のなかにそれぞれのページを割り付けるように押し込む必要はありません。（そして、それは多くのモバイルに最適化されていないサイトが崩れることにもなっています） ユーザーは、ページのそれぞれの領域を見るために、上下左右に動かしたり、ズームすることができます。</p>
+
+<p>Mobile Safari は、ウェブ開発者がビューポートのサイズと拡大率を制御できるよう、「viewport meta タグ」を導入しました。これはウェブ標準の何かではありませんが、他の多くのモバイルブラウザが、今ではこのタグをサポートしています。Apple の<a class="external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW29">解説文書</a>は、ウェブ開発者がこのタグをどのように使えばよいかを、良く説明しています。しかし、Fennec でそれがどのように実装されているかを正確に理解するために、いくつかの検証をしなければなりませんでした。例えば、Safari の文書では、中身は「コンマで区切られたリスト」とされています。しかし、既存のブラウザとウェブページは、コンマとセミコロン、半角スペースの混在で区切られています。</p>
+
+<p>quirksmode.org の「<a class="external" href="http://www.quirksmode.org/mobile/viewports2.html" title="http://www.quirksmode.org/mobile/viewports2.html">A Tale of Two Viewports</a>」という記事で、異なるモバイルブラウザでのビューポートについて、より詳しく知ることができます。</p>
+
+<h2 id="ビューポートの基本">ビューポートの基本</h2>
+
+<p>モバイルに最適化したサイトは、次のような記述を含んでいるのが典型的です：</p>
+
+<pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</pre>
+
+<p><code>width</code> プロパティはビューポートのサイズを制御します。例えば、<code>width=600</code> というような任意のピクセル数を設定するか、<code>device-width</code> という、拡大率が 100% のときの、CSS ピクセルでの画面の幅を示す定数を設定します。（<code>height</code> と <code>device-height</code> 定数も紐づいています。こちらは、ビューポートの高さによって大きさや位置が変わる要素のあるページで便利でしょう）</p>
+
+<p><code>initial-scale　</code>プロパティは、ページが最初にロードされたときの拡大率を制御します。<code>maximum-scale</code>、<code>minimum-scale</code>、そして <code>user-scalable</code> プロパティは、ページをズームインまたはズームアウトできるかどうかを制御します。</p>
+
+<h2 id="「1ピクセル」は1ピクセルではない">「1ピクセル」は1ピクセルではない</h2>
+
+<p>The iPhone and many popular Android phones have 3- to 4-inch (7–10 cm) screens with 320—480 pixels (~160 dpi). Firefox for Maemo runs on the Nokia N900, which has the same physical size but 480—800 pixels (~240 dpi). Because of this, the last version of Fennec displayed many pages about one third smaller (in actual, physical size) than iPhone or Android. This caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in <a class="external" href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html">A pixel is not a pixel</a>.</p>
+
+<p>Fennec 1.1 for Maemo will use 1.5 hardware pixels for each CSS "pixel," following the lead of Android's WebKit-based browser. This means a page with <code>initial-scale=1</code> will render at close to the same physical size in Fennec for Maemo, Mobile Safari for iPhone, and the Android Browser on both <a class="external" href="http://developer.android.com/guide/practices/screens_support.html#range">HDPI and MDPI</a> phones. This is consistent with the <a class="external" href="http://www.w3.org/TR/CSS2/syndata.html#length-units">CSS 2.1 specification</a>, which says:</p>
+
+<blockquote>
+<p>If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.</p>
+</blockquote>
+
+<p>For web developers, this means that 320px be full width in portrait mode at scale=1, on all of the above-mentioned handheld devices, and they may size their layouts and images accordingly. But remember that not all mobile devices are the same width; you should also make sure that your pages work well in landscape mode, and on larger devices like the iPad and Android tablets.</p>
+
+<p>On 240-dpi screens, pages with <code>initial-scale=1</code> will effectively be zoomed to 150% by both Fennec and Android WebKit. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at 150% of their final size (or 200%, to support 320-dpi devices such as a retina display iPhone) and then scale them down using CSS or viewport properties.</p>
+
+<p>The default ratio depends on the display density.  On a display with density less than 200dpi, the ratio is 1.0.  On displays with density between 200 and 300dpi, the ratio is 1.5.  For displays with density over 300dpi, the ratio is the integer floor(<em>density</em>/150dpi).  Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.</p>
+
+<h2 id="Viewport_width_and_screen_width">Viewport width and screen width</h2>
+
+<p>Many sites set their viewport to <code>"width=320, initial-scale=1"</code> to fit precisely onto the iPhone display in portrait mode. As mentioned above, this caused <a class="external" href="http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag/">problems</a> when Fennec 1.0 rendered these sites, especially in landscape mode. To fix this, Fennec 1.1 will expand the viewport width if necessary to fill the screen at the requested scale. This matches the behavior of Android and Mobile Safari, and is especially useful on large-screen devices like the iPad. (Allen Pike's <a class="external" href="http://www.antipode.ca/2010/choosing-a-viewport-for-ipad-sites/">Choosing a viewport for iPad sites</a> has a good explanation for web developers.)</p>
+
+<p>For pages that set an initial or maximum scale, this means the <code>width</code> property actually translates into a <em>minimum</em> viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:</p>
+
+<pre>&lt;meta name="viewport" content="width=500, initial-scale=1"&gt;</pre>
+
+<p>Fennec 1.1 also adds support for <code>minimum-scale</code>, <code>maximum-scale</code>, and <code>user-scalable</code>, with defaults and limits similar to <a class="external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">Safari's</a>. These properties affect the initial scale and width, as well as limiting changes in zoom level.</p>
+
+<p>Mobile browsers handle orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a <code>maximum-scale</code> value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:</p>
+
+<pre>&lt;meta name="viewport" content="initial-scale=1, maximum-scale=1"&gt;</pre>
+
+<p>This is not necessary in Fennec; when the device changes orientation, Fennec updates the viewport size, the page layout, and JavaScript/CSS properties like <code>device-width</code>, based on its new window dimensions.</p>
+
+<h2 id="Common_viewport_sizes_for_mobile_and_tablet_devices">Common viewport sizes for mobile and tablet devices</h2>
+
+<p>If want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of <a href="http://viewportsizes.com/" title="http://viewportsizes.com/">mobile and tablet viewport sizes here</a>. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#viewport-meta', '&lt;meta name="viewport"&gt;')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Non-normatively describes the Viewport META element</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to make sure we can implement any changes made during standardization.</p>