diff options
Diffstat (limited to 'files/de/web/css/@viewport/index.html')
-rw-r--r-- | files/de/web/css/@viewport/index.html | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/files/de/web/css/@viewport/index.html b/files/de/web/css/@viewport/index.html new file mode 100644 index 0000000000..2cdcd37691 --- /dev/null +++ b/files/de/web/css/@viewport/index.html @@ -0,0 +1,96 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +translation_of: Web/CSS/@viewport +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Die <code>@viewport</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-Regel</a> enthält eine Menge aus geschachtelten Deskriptoren in einem CSS-Block, der durch geschweifte Klammern begrenzt wird. Diese Deskriptoren steuern die Viewport-Einstellungen, insbesondere auf mobilen Geräten.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>(Dieser MDN Artikel ist derzeit nur ein Abriss, ihm fehlt die vollständige Beschreibung der Syntax.)</p> + +<pre class="syntaxbox" style="font-size: 14px;">@viewport { + /* viewport-Deskriptor: viewport-Wert; */ +}</pre> + +<p> </p> + +<p>Ein <em>Zoomfaktor</em> von <code>1.0</code> oder <code>100%</code> beschreibt kein Zooming. Größere Werte vergrößern, kleinere Werte verkleinern.</p> + +<h3 id="Deskriptoren">Deskriptoren</h3> + +<p>Browser sollen unbekannte Deskriptoren ignorieren.</p> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt> + <dd>Verwendet für die Festlegung der Breite des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt> + <dd>Verwendet für die Festlegung der Breite des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt> + <dd>Eine Kurznotation für die Festlegung von sowohl <code>min-width</code> als auch <code>max-width</code></dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt> + <dd>Verwendet für die Festlegung der Höhe des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt> + <dd>Verwendet für die Festlegung der Höhe des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt> + <dd>Eine Kurznotation für die Festlegung von sowohl <code>min-height</code> als auch <code>max-height</code></dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt> + <dd>Legt den initialen Zoomfaktor fest.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt> + <dd>Legt den minimalen Zoomfaktor fest.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt> + <dd>Legt den maximalen Zoomfaktor fest.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt> + <dd>Steuert, ob der Anwender den Zoomfaktor ändern darf.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt> + <dd>Steuert die Orientierung des Dokuments (Hoch- oder Querformat).</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="eval" style="font-size: 14px;">@viewport { + min-width: 640px; + max-width: 800px; +} +@viewport { + zoom: 0.75; + min-zoom: 0.5; + max-zoom: 0.9; +} +@viewport { + orientation: landscape; +}</pre> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezification</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("css.at-rules.viewport")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{HTMLElement("meta")}}, specifically <code><meta name="viewport"></code></li> + <li><a href="/en-US/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li> +</ul> |