width: Breite des Ansichtsfensters (Bereich von 200 bis 10.000, Standard ist 980 Pixel )height: die Höhe des Ansichtsfensters (im Bereich von 223 bis 10.000)."/> width: Breite des Ansichtsfensters (Bereich von 200 bis 10.000, Standard ist 980 Pixel )height: die Höhe des Ansichtsfensters (im Bereich von 223 bis 10.000).">

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

Zusammenfassung der mobilen Metazeilen

零下一度
零下一度Original
2017-06-27 10:04:301310Durchsuche
<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>

 
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" />

 

<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>

 

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!

Stellungnahme:
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