移动端meta行的汇总

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

　
width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ）

height: viewport 的高度 （范围从 223 到 10,000 ）

initial-scale: 初始的缩放比例 （范围从>0到 10 ）

minimum-scale: 允许用户缩放到的最小比例

maximum-scale: 允许用户缩放到的最大比例

user-scalable: 用户是否可以手动缩放

 

58813ed86a1cdd2991602428c6fba2c8

4b7bea8e5b9e922974f8f3271c21a707

81551c7f21328e13998564eb52591507

50dff0792ccf24b265db074557dcc885

bb16cb682fc13121c2af2bcac3c73318

b36db6ab452c01e5a40ff272d15e005a

e8731b4011cd50bc7354139bbed997b1

1b8c2e8cb9bd572efe6f48c4d3b410d4

6f19cd5619a035d8b683e643dcc4d8da

c6dcd67109559a18a8048d9c3cc69fce

54af9b16ddd0e25579a8280d308bb766

41c894ba030a1f17c64635b1a4411769

f632f7f0b9d3af18261c230db4d877e4

9641a06f605363bb053a39bd4ed4a37e

3be35764d5c427c79861dc1ee87b4e51

e93148c6083a95e98275071b4aeea5f6

ad37309dc259cee1549f4dc6ed78b140

082ca483720e1df6e1c06321559a3ed9

101a94467bdedda930e0e340e30bbb7f

f94e2841cb471d14de1442219220632c

c8f0924f4f81ce3ed4ae81c14aaa003f

5d11b99b8fd63f7e0d339028e8820447

ece16451c8faf5b0642a27f086f176a3

98a803cef4b829bcd46bd742170824f9

1. apple-touch-icon
1757cebcee38f01e5579d88a3baa2bfc
如果 apple-mobile-web-app-capable 设置为 yes 了，

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

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

2. apple-touch-startup-image
34f307b10f47c3bbaed9cf9ea6617564
基于 apple-mobile-web-app-capable 设置为 yes ，

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

和 apple-touch-icon 不同，

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

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

 

// iPhone
4bfaa273112ebbc00e23a7aef819b958

 

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

 

以上是移动端meta行的汇总的详细内容。更多信息请关注PHP中文网其他相关文章！