diff options
Diffstat (limited to 'files/ar/mozilla/mobile')
| -rw-r--r-- | files/ar/mozilla/mobile/index.html | 32 | ||||
| -rw-r--r-- | files/ar/mozilla/mobile/viewport_meta_tag/index.html | 91 |
2 files changed, 123 insertions, 0 deletions
diff --git a/files/ar/mozilla/mobile/index.html b/files/ar/mozilla/mobile/index.html new file mode 100644 index 0000000000..669a69a9ed --- /dev/null +++ b/files/ar/mozilla/mobile/index.html @@ -0,0 +1,32 @@ +--- +title: Mobile +slug: Mozilla/Mobile +tags: + - Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Mobile +--- +<h2 id="Firefox_OS" name="Firefox_OS"><a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a></h2> + +<p>Firefox OS is an open source mobile operating system which uses Linux and Mozilla's Gecko engine to run a user interface and set of applications written entirely in HTML, CSS and JavaScript.</p> + +<p>Read about how to install Firefox OS and how to develop apps for it.</p> + +<h2 id="Firefox_for_Android" name="Firefox_for_Android"><a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a></h2> + +<p>Firefox for Android is Mozilla's mobile web browser for Android devices. It's recently been rewritten to use Android's native UI, making it faster, leaner and more responsive. It provides support for powerful APIs to access device capabilities such as the camera and telephony stack.</p> + +<p>Read about how to help create Firefox for Android, how to use its device APIs, and how to build mobile add-ons.</p> + +<h2 id="Firefox_for_iOS" name="Firefox_for_iOS"><a href="/en-US/docs/Mozilla/Firefox_for_iOS">Firefox for iOS</a></h2> + +<p>Firefox for iOS is Mozilla's upcoming mobile web browser for iOS devices. Because of AppStore restrictions, it uses the built in WebView supplied by iOS rather than Gecko.</p> + +<p>Read about how to help with Firefox for iOS, and how to integrate it with your other iOS Apps.</p> + +<h2 id="Mobile_web_development" name="Mobile_web_development"><a href="/en-US/docs/Web/Guide/Mobile">Mobile web development</a></h2> + +<p>Mobile devices have very different hardware characteristics from desktop or laptop computers, and many of the APIs used to work with them are still in the process of being standardized.</p> + +<p>Read about how to develop web sites that look good on mobile devices and take advantage of the new possibilities they offer. Learn how to make sure your web site works well on different browsers.</p> diff --git a/files/ar/mozilla/mobile/viewport_meta_tag/index.html b/files/ar/mozilla/mobile/viewport_meta_tag/index.html new file mode 100644 index 0000000000..ed8d36f6c8 --- /dev/null +++ b/files/ar/mozilla/mobile/viewport_meta_tag/index.html @@ -0,0 +1,91 @@ +--- +title: Using the viewport meta tag to control layout on mobile browsers +slug: Mozilla/Mobile/Viewport_meta_tag +translation_of: Mozilla/Mobile/Viewport_meta_tag +--- +<p>The upcoming release of <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec">Mobile Firefox (Fennec)</a> 1.1 features improved support for the <a href="/en-US/docs/Web/HTML/Element/meta#Attributes"><code><meta name="viewport"></code></a> tag. Previous versions of Fennec supported the <code>width</code>, <code>height</code>, and <code>initial-scale</code> viewport properties, but had <a class="external" href="http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag/">problems</a> with some sites designed for iPhone and Android browsers. We now support the same properties Mobile Safari does, and we also changed Fennec to render mobile sites more consistently on screens of different sizes and resolutions.</p> + +<p class="caption">touch.facebook.com before:</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 after:</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>You can see these changes for yourself in the latest <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mobile-1.9.2/">Fennec 1.1</a> and <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mobile-trunk/">trunk</a> nightly builds for Maemo, Windows, Mac, or Linux.</p> + +<h2 id="Background">Background</h2> + +<p>Mobile browsers like Fennec render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.</p> + +<p>Mobile Safari introduced the "viewport meta tag" to let web developers control the viewport's size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard. Apple's <a class="external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW29">documentation</a> does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.</p> + +<p>Learn more about viewports in different mobile browsers in <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> at quirksmode.org.</p> + +<h2 id="Viewport_basics">Viewport basics</h2> + +<p>A typical mobile-optimized site contains something like the following:</p> + +<pre><meta name="viewport" content="width=device-width, initial-scale=1"></pre> + +<p>The <code>width</code> property controls the size of the viewport. It can be set to a specific number of pixels like <code>width=600</code> or to the special value <code>device-width</code> value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding <code>height</code> and <code>device-height</code> values, which may be useful for pages with elements that change size or position based on the viewport height.)</p> + +<p>The <code>initial-scale</code> property controls the zoom level when the page is first loaded. The <code>maximum-scale</code>, <code>minimum-scale</code>, and <code>user-scalable</code> properties control how users are allowed to zoom the page in or out.</p> + +<h2 id="A_pixel_is_not_a_pixel">A pixel is not a pixel</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><meta name="viewport" content="width=500, initial-scale=1"></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><meta name="viewport" content="initial-scale=1, maximum-scale=1"></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', '<meta name="viewport">')}}</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> |