aboutsummaryrefslogtreecommitdiff
path: root/files/de/web/css/@viewport/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/de/web/css/@viewport/index.html')
-rw-r--r--files/de/web/css/@viewport/index.html96
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>&lt;meta name="viewport"&gt;</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>