Mobile Browser rendern normalerweise Seiten in einem virtuellen Fenster, das breiter ist als der Bildschirm. Dieses virtuelle Fenster ist Ansichtsfenster. Ziel ist es, Webseiten anzuzeigen, die normalerweise nicht an das mobile Terminal angepasst sind, damit sie vollständig an Benutzer angezeigt werden können. Manchmal, wenn wir mobile Geräte verwenden, um auf die Desktop -Webseite zuzugreifen, sehen wir eine horizontale Bildlaufleiste, und die Breite des Anzeigebereichs ist hier die Breite des Ansichtsfensters.
Verwenden Sie regelmäßig den folgenden Code, wenn die Seite skaliert werden kann
<meta name = Ansichtsfenster inhalt = width = Gerätebreite, initial scale = 1 />
Wenn Sie nicht zoomen möchten, verwenden Sie den folgenden Code
2. Der Unterschied zwischen Pixel und Gerätebereich Pixel in CSS<meta name = Ansichtsfensterinhalt = Breite = Gerätebreite, initiale scale = 1,0, minimal scale = 1,0, maximal scale = 1,0, user-scalable = no>
Bei der Entwicklung von Desktop -Webseiten ist 1PX in CSS 1PX auf dem Gerät. 1PX in CSS ist jedoch nur ein abstrakter Wert, der die tatsächlichen Pixel nicht darstellt. Während in mobilen Geräten ist die Pixeldichte verschiedener Geräte unterschiedlich, und 1PX in CSS entspricht möglicherweise nicht einem Pixelwert des realen Geräts. Die Benutzerskalierung ändert auch, wie viele Gerätepixel 1PX in CSS darstellen. Dieses Verhältnis ist DevicePixelratio
Physikalische Pixel/unabhängige Pixel = DevicePixelRatio
Wir können im Browser und im Druckfenster zoomen. Die darin enthaltenen unabhängigen Pixel können in CSS als PX verstanden werden.
1. Grundlagen der AnsichtsfensterCode:
<meta name = viewport content = width = Gerätebreite, initiale scale = 1, maximal scale = 1>
Das Folgende sind mehrere Eigenschaften des Ansichtsfenfers. Diese Eigenschaften können gemischt verwendet werden. Mehrere Eigenschaften sollten gleichzeitig durch Kommas getrennt werden. Hier erweitern wir ein Konzept namens ideales Ansichtsfenster, das sich unter idealen Umständen auf das Ansichtsfenster bezieht. Es kann den gesamten Inhalt der Webseite normalerweise ohne Skalierung von Benutzer und horizontalen Scroll -Balken anzeigen und alle Text deutlich sehen. Egal wie klein dieser Text in CSS definiert ist, er ist bei der Anzeige deutlich zu sehen.
| Eigentum | beschreiben |
|---|---|
| Breite | Steuert die Breite des Ansichtsfensters, Sie können eine Nummer angeben. oder setzen Sie die Gerätebreite, um festzulegen |
| Höhe | Steuern Sie die Höhe des Aussichtsfensters. Diese Eigenschaft ist nicht sehr wichtig und selten verwendet. |
| initiale Ebene | Steuern |
| maximale Ebene | Ermöglicht den maximalen Skalierungswert des Benutzers eine Zahl und kann dezimal sein |
| Mindestmaßstab | Ermöglicht den minimalen Skalierungswert des Benutzers eine Zahl, die mit Dezimalstellen eingenommen werden kann. |
| benutzerkalierbar | Ob dem Benutzer skaliert werden darf, ist der Wert nein oder ja, nein bedeutet nicht zulässig. Ja bedeutet, zulassen |
1. Width und initiale Maßstäbe
Wenn Breite und Anfangsmaßstab gesetzt sind, wählt der Browser automatisch den größten Wert für die Anpassung aus. Vermögenswert:
<meta name = Ansichtsfenster inhalt = width = 400, initial scale = 1>
Der Browser wählt einen großen Wert aus, der sich anpassen kann. Wenn die Breite des idealen Ansichtsfensters des aktuellen Fensters 300 beträgt und der Wert des anfänglichen Maßstabs 1 beträgt, wird der Wert der Breite von 400 erhalten. Wenn das ideale Ansichtsfenster des aktuellen Fensters 480 beträgt, wird 480 ausgewählt.
Tatsächlich repräsentieren Width = Gerätebreite und initiale. Der beste Weg, um Kompatibilität zu schreiben, ist
<meta name = Ansichtsfenster inhalt = width = Gerätebreite, initial scale = 1>
2. Dynamisch ändern Attribute
A. document.write ()
document.write ('<meta name = viewport content = width = Gerätebreite, Initial-Scale = 1>')
B.Setattribute
Ansichtsfensterkonzeptvar mvp = document.getElementById ('testViewport');
mvp.setattribute ('content', 'width = 480');
Mobile Browser rendern normalerweise Seiten in einem virtuellen Fenster, das breiter ist als der Bildschirm. Dieses virtuelle Fenster ist Ansichtsfenster. Ziel ist es, Webseiten anzuzeigen, die normalerweise nicht an das mobile Terminal angepasst sind, damit sie vollständig an Benutzer angezeigt werden können. Manchmal, wenn wir mobile Geräte verwenden, um auf die Desktop -Webseite zuzugreifen, sehen wir eine horizontale Bildlaufleiste, und die Breite des Anzeigebereichs ist hier die Breite des Ansichtsfensters.
Unterschied zwischen Pixel und Gerätpixel in CSSBei der Entwicklung von Desktop -Webseiten ist 1PX in CSS 1PX auf dem Gerät. 1PX in CSS ist jedoch nur ein abstrakter Wert, der die tatsächlichen Pixel nicht darstellt. Während in mobilen Geräten ist die Pixeldichte verschiedener Geräte unterschiedlich, und 1PX in CSS entspricht möglicherweise nicht einem Pixelwert des realen Geräts. Die Benutzerskalierung ändert auch, wie viele Gerätepixel 1PX in CSS darstellen. Dieses Verhältnis ist DevicePixelratio
Physikalische Pixel/unabhängige Pixel = DevicePixelRatio
Wir können im Browser und im Druckfenster zoomen. Die darin enthaltenen unabhängigen Pixel können in CSS als PX verstanden werden.
Ansichtsfenster -GrundlagenEine typische mobile optimierte Site enthält Inhalte, die den folgenden ähneln:
<meta name = viewport content = width = Gerätebreite, initiale scale = 1, maximal scale = 1>
Das Folgende sind mehrere Eigenschaften des Ansichtsfenfers. Diese Eigenschaften können gemischt verwendet werden. Mehrere Eigenschaften sollten gleichzeitig durch Kommas getrennt werden. Hier erweitern wir ein Konzept namens ideales Ansichtsfenster, das sich unter idealen Umständen auf das Ansichtsfenster bezieht. Es kann den gesamten Inhalt der Webseite normalerweise ohne Skalierung von Benutzer und horizontalen Scroll -Balken anzeigen und alle Text deutlich sehen. Egal wie klein dieser Text in CSS definiert ist, er ist bei der Anzeige deutlich zu sehen.
| Eigentum | beschreiben |
|---|---|
| Breite | Steuert die Breite des Ansichtsfensters, Sie können eine Nummer angeben. oder setzen Sie die Gerätebreite, um festzulegen |
| Höhe | Steuern Sie die Höhe des Aussichtsfensters. Diese Eigenschaft ist nicht sehr wichtig und selten verwendet. |
| initiale Ebene | Steuern |
| maximale Ebene | Ermöglicht den maximalen Skalierungswert des Benutzers eine Zahl und kann dezimal sein |
| Mindestmaßstab | Ermöglicht den minimalen Skalierungswert des Benutzers eine Zahl, die mit Dezimalstellen eingenommen werden kann. |
| benutzerkalierbar | Ob dem Benutzer skaliert werden darf, ist der Wert nein oder ja, nein bedeutet nicht zulässig. Ja bedeutet, zulassen |
1. Width und initiale Maßstäbe
Wenn Breite und Anfangsmaßstab gesetzt sind, wählt der Browser automatisch den größten Wert für die Anpassung aus. Vermögenswert:
<meta name = Ansichtsfenster inhalt = width = 400, initial scale = 1>
Der Browser wählt einen großen Wert aus, der sich anpassen kann. Wenn die Breite des idealen Ansichtsfensters des aktuellen Fensters 300 beträgt und der Wert des anfänglichen Maßstabs 1 beträgt, wird der Wert der Breite von 400 erhalten. Wenn das ideale Ansichtsfenster des aktuellen Fensters 480 beträgt, wird 480 ausgewählt.
Tatsächlich repräsentieren Width = Gerätebreite und initiale. Der beste Weg, um Kompatibilität zu schreiben, ist
<meta name = Ansichtsfenster inhalt = width = Gerätebreite, initial scale = 1>
2. Dynamisch ändern Attribute
A. document.write ()
document.write ('<meta name = viewport content = width = Gerätebreite, Initial-Scale = 1>')
B.Setattribute
var mvp = document.getElementById ('testViewport');
mvp.setattribute ('content', 'width = 480');
Okay, dieser Artikel wurde Ihnen vorgestellt. Sie können nach Ihren eigenen Testanforderungen wählen. Im Allgemeinen haben PC und Mobile keine Anpassungsfähigkeit, um Skalierung ohne Skalierung zu verwenden. Wenn Sie zum mobilen Terminal springen, können Sie ohne Auswirkungen skalieren.