Einführung in die Viewport-Kompatibilität auf Mobilgeräten

Das Ansichtsfenster auf Mobilgeräten ist unterteilt in Layout-Ansichtsfenster, visuelles Ansichtsfenster und ideales Ansichtsfenster drei Kategorien,

unter ihnen ist das ideale Ansichtsfenster das am besten geeignete Ansichtsfenster für Mobilgeräte Geräte, ideal Die Breite des Ansichtsfensters entspricht der Bildschirmbreite des Mobilgeräts. Solange die Breite eines Elements auf die Breite des idealen Ansichtsfensters in CSS eingestellt ist (Einheit ist px), dann ist die Breite dieses Elements ist die Breite des Gerätebildschirms, d. h. die Breite beträgt 100 %.

Die Bedeutung des idealen Ansichtsbereichs besteht darin, dass Websites, die für den idealen Ansichtsbereich konzipiert sind, unabhängig von der Bildschirmauflösung perfekt dargestellt werden können, ohne dass Benutzer manuell zoomen oder horizontale Bildlaufleisten benötigen.

Da die ideale Ansichtsfensterbreite aller iPhones 320 Pixel beträgt, ist die einfache und grobe Möglichkeit, die H5-Seite an alle iPhones und Android-Modelle anzupassen: Stellen Sie das Ansichtsfenster ein

Meta-Viewport-Tag wurde erstmals von Apple eingeführt Das Unternehmen hat es in seinem Safari-Browser eingeführt, um das Darstellungsproblem auf Mobilgeräten zu lösen. Später folgten auch Android- und große Browserhersteller und führten die Unterstützung des Meta-Viewports ein. Fakten haben auch bewiesen, dass dieses Ding immer noch sehr nützlich ist. In den Spezifikationen von Apple verfügt der Meta-Viewport über 6 Attribute (nennen wir diese in Inhaltsattributen und -werten), wie folgt:

Setzen Sie die Breite des

width

width	设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport  的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

Layout-Ansichtsfensters

auf eine positive Ganzzahl oder die Zeichenfolge „width-device“ initial-scale Legen Sie den anfänglichen Skalierungswert der Seite fest, bei dem es sich um eine Zahl handelt, die Dezimalstellen enthalten kann. Minimum-SkalierungDas Minimum Der vom Benutzer zulässige Zoomwert ist eine Zahl, die Dezimalstellen enthalten kann. maximum-scale Der vom Benutzer maximal zulässige Zoomwert ist eine Zahl. kann Dezimalzahlen annehmen Höhe Legen Sie die Höhe des Layout-Ansichtsfensters fest. Dieses Attribut ist dafür nicht nützlich us Wichtig, selten verwendet Benutzerskalierbar Ob der Benutzer zoomen darf, der Wert ist „Nein“ oder „Ja“, nein bedeutet nicht erlaubt, ja bedeutet erlaubt Diese Attribute können gleichzeitig verwendet werden, einzeln oder gemischt. Wenn mehrere Attribute gleichzeitig verwendet werden, nur Trennen Sie sie durch Kommas.

Das obige ist der detaillierte Inhalt vonEinführung in die Viewport-Kompatibilität auf Mobilgeräten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!