Heim > Web-Frontend > H5-Tutorial > Zusammenfassung der mobilen Metazeilen

Zusammenfassung der mobilen Metazeilen

零下一度
Freigeben: 2017-06-27 10:04:30
Original
1324 Leute haben es durchsucht
<code class="hljs django"><span class="xml"><span class="hljs-tag"><span style="font-size: 16px"><</span><span class="hljs-name"><span style="font-size: 16px">meta </span><span class="hljs-attr"><span style="font-size: 16px">name=</span><span class="hljs-string"><span style="font-size: 16px">"viewport" <br/></span><span class="hljs-attr"><span style="font-size: 16px">content=</span><span class="hljs-string"><span style="font-size: 16px">"width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /></span> </span></span></code>
Nach dem Login kopieren

 
Breite: Breite des Ansichtsfensters (im Bereich von 200 bis 10.000, Standard ist 980 Pixel)

Höhe: Höhe des Ansichtsfensters (im Bereich von 223 bis 10.000)

Anfangsmaßstab: das anfängliche Zoomverhältnis (im Bereich von >0 bis 10)

Minimalmaßstab: der minimale Maßstab, auf den der Benutzer zoomen darf

Maximalmaßstab: der maximale Maßstab Der Benutzer darf auf „Skalieren“ zoomen

Benutzerskalierbar: Ob der Benutzer manuell skalieren kann

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="renderer" content="webkit">

🎜>http-equiv="X-UA-Compatible" content ="IE=edge">

<meta name="HandheldFriendly" content="true">

>

<meta name="MobileOptimized" content= „320“>

🎜>

<meta name="x5-orientation" content="portrait">

<meta name="full-screen" content="yes">

<meta name="x5 - Vollbild" content="true">

<meta name="browsermode" content="application">

< !-- QQ-Anwendungsmodus --> >

<meta name="x5-page-mode" content="app">

>

<meta name="msapplication-tap-highlight" content= "nein">

1. apple-touch-icon
< link rel= "apple-touch-icon" sizes= "76x76" href= "touch-icon-ipad.png">
如果 apple-mobile-web-app-capable 设置为 yes 了,

那么在苹果机的safari上可以通过添加到主屏按钮将网站添加到主屏幕上。

而设置相应 apple-touch-icon 标签,则添加到主屏上的图标就会使用我们指定的图片。

2. apple-touch-startup-image
< link rel= "apple-touch-startup-image" href= "/startup.png">
基于 apple-mobile-web-app-capable 设置为 yes ,

可以为WebApp设置一个类似NativeApp的启动画面。

和 apple-touch-icon 不同,

apple-mobile-web-app-capable 不支持sizes属性,

要使用media来加载不同的启动画面。

 

// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
Nach dem Login kopieren

 

<code class="hljs cpp"><span class="hljs-comment">// iPhone Retina
<link href=<span class="hljs-string">"apple-touch-startup-image-640x920.png" media=<span class="hljs-string">"(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"<br/> rel=<span class="hljs-string">"apple-touch-startup-image" /></span></code>
Nach dem Login kopieren

 

Das obige ist der detaillierte Inhalt vonZusammenfassung der mobilen Metazeilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage