diff options
Diffstat (limited to 'files/de/mozilla/mobile')
| -rw-r--r-- | files/de/mozilla/mobile/index.html | 25 | ||||
| -rw-r--r-- | files/de/mozilla/mobile/viewport_meta_tag/index.html | 86 |
2 files changed, 0 insertions, 111 deletions
diff --git a/files/de/mozilla/mobile/index.html b/files/de/mozilla/mobile/index.html deleted file mode 100644 index b3a3dc1803..0000000000 --- a/files/de/mozilla/mobile/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Mobil -slug: Mozilla/Mobile -tags: - - Mozilla - - mobil -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 ist ein Open Source Betriebssystem, welches Linux und Mozilla's Gecko Rendering Engine verwendet um eine Benutzeroberfläche und viele Anwendungen bereit zu stellen, die komplett in HTML, CSS und JavaScript geschrieben sind.</p> - -<p>Informiere Dich darüber wie Firefox OS installiert wird und wie Apps für Firefox OS entwickelt werden.</p> - -<h2 id="Firefox_for_Android" name="Firefox_for_Android"><a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox für Android</a></h2> - -<p>Firefox für Android ist Mozilla's Web Browser für Android-Geräte. Firefox für Android wurde vor kurzem komplett überarbeitet um Android's natives User Interface zu nutzen und um es schneller, schlanker und besser anpassbar zu machen. Es unterstützt hardware-nahe APIs um z.B. auf die Kamera und die Telefonfunktionen zugreifen zu können.</p> - -<p>Informiere Dich darüber wie Du beim Aufbau von Firefox für Android helfen kannst, wie die APIs benutzt werden und wie mobile Add Ons entwickelt werden.</p> - -<h2 id="Mobile_web_development" name="Mobile_web_development"><a href="/en-US/docs/Web/Guide/Mobile">Mobile Web Entwicklung</a></h2> - -<p>Mobile Geräte haben deutlich andere Hardware-Voraussetzungen als PCs oder Laptops und viele der genutzen APIs sind noch nicht standardisiert.</p> - -<p>Informiere Dich darüber wie Web-Seiten entwickelt werden, die auf Mobil-Geräten gut aussehen und erfahre mehr über die neuen Möglichkeiten dieser Technologien. Lerne wie Du sicherstellen kannst, dass Deine Web-Seiten auf verschiedenen Browsern gut funktionieren.</p> diff --git a/files/de/mozilla/mobile/viewport_meta_tag/index.html b/files/de/mozilla/mobile/viewport_meta_tag/index.html deleted file mode 100644 index c17554471a..0000000000 --- a/files/de/mozilla/mobile/viewport_meta_tag/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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 ---- -<h2 id="Hintergrund">Hintergrund</h2> - -<p> </p> - -<p>Der {{glossary("viewport")}} des Browsers ist der Bereich des Fensters, in dem Webinhalte zu sehen sind. Dies ist oft nicht die gleiche Größe wie die komplette gerenderte Seite. In diesem Fall stellt der Browser Scrollbars zur Verfügung, mit denen der Benutzer umherscrollen und auf alle Inhalte zugreifen kann.</p> - -<p>Geräte mit schmalem Display (z.B. Handys) rendern Seiten in einem virtuellen Fenster oder Ansichtsfenster, das normalerweise breiter als der Bildschirm ist, und verkleinern dann das gerenderte Ergebnis, so dass es auf einmal zu sehen ist. Die Benutzer können dann schwenken und zoomen, um verschiedene Bereiche der Seite zu sehen. Wenn beispielsweise ein mobiler Bildschirm eine Breite von 640px hat, können Seiten mit einem virtuellen Ansichtsfenster von 980px gerendert und dann verkleinert werden, um in den 640px-Bereich zu passen.</p> - -<p>Dies geschieht, weil viele Seiten nicht mobil optimiert sind und bei einer kleinen Ansichtsfensterbreite brechen (oder zumindest schlecht aussehen). Dieses virtuelle Ansichtsfenster ist eine Möglichkeit, nicht-mobile optimierte Seiten auf schmalen Bildschirmen besser aussehen zu lassen.</p> - -<h3 id="Enter_viewport_meta_tag">Enter viewport meta tag</h3> - -<p>However, this mechanism is not so good for pages that are optimized for narrow screens using <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a> — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.</p> - -<p>To mitigate this problem, Apple introduced the "viewport meta tag" in Safari iOS 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="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">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>, 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>In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially 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>On high dpi screens, pages with <code>initial-scale=1</code> will effectively be zoomed by browsers. 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 a higher scale than their final size and then scale them down using CSS or viewport properties. 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 the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly. But remember that not all mobile devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.</p> - -<p>The default pixel 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>Sites can set their viewport to a specific size. For example, the definition <code>"width=320, initial-scale=1"</code> can be used to fit precisely onto a small phone display in portrait mode. This can cause <a class="external" href="http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag/">problems</a> when the browser doesn't render a page at a larger size. To fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. This 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>Other <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes">attributes</a> that are available are <code>minimum-scale</code>, <code>maximum-scale</code>, and <code>user-scalable</code>. These properties affect the initial scale and width, as well as limiting changes in zoom level.</p> - -<p>Not all mobile browsers handle orientation changes in the same way. 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> - -<h2 id="Common_viewport_sizes_for_mobile_and_tablet_devices">Common viewport sizes for mobile and tablet devices</h2> - -<p>If you 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 keep up to date with any changes.</p> |