在移動端進(jìn)行網(wǎng)頁開發(fā)，首先要弄明白viewport在移動設(shè)備中的作用乃摹，meta中viewport的作用是讓我們的網(wǎng)頁更好的適配和響應(yīng)各種分辨率不同的移動設(shè)備。
A. 常用代碼：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
content中屬性的作用：
| 屬性 | 作用 |
|---|---|
| width | 設(shè)置layout viewport 的寬度，為一個(gè)正整數(shù)绿淋，或字符串"width-device" |
| initial-scale | 設(shè)置頁面的初始縮放值，為一個(gè)數(shù)字尝盼，可以帶小數(shù) |
| minimum-scale | 允許用戶的最小縮放值吞滞，為一個(gè)數(shù)字，可以帶小數(shù) |
| maximum-scale | 允許用戶的最大縮放值东涡，為一個(gè)數(shù)字冯吓，可以帶小數(shù) |
| height | 設(shè)置layout viewport 的高度，這個(gè)屬性對我們并不重要疮跑，很少使用 |
| user-scalable | 是否允許用戶進(jìn)行縮放组贺，值為"no"或"yes", no 代表不允許，yes代表允許 |
所以上述代碼的作用就是讓當(dāng)前viewport的寬度等于設(shè)備的寬度祖娘，同時(shí)不允許用戶手動縮放失尖。也許允不允許用戶縮放不同的網(wǎng)站有不同的要求啊奄，但讓viewport的寬度等于設(shè)備的寬度，這個(gè)應(yīng)該是大家都想要的效果掀潮，如果你不這樣的設(shè)定的話菇夸，那就會使用那個(gè)比屏幕寬的默認(rèn)viewport，也就是說會出現(xiàn)橫向滾動條仪吧。
B. name 屬性的 apple-mobile-web-app-capable 值（網(wǎng)站開啟對 web app 程序的支持）
<meta name="apple-mobile-web-app-capable" content="yes" />
- 網(wǎng)站開啟對 web app 程序的支持庄新。
- 該 meta 可以看出內(nèi)容為“蘋果設(shè)備 web 應(yīng)用程序 xx”，就是說該 meta 是專門定義 web 應(yīng)用的薯鼠。
C. name 屬性的 apple-mobile-web-app-status-bar-style 值（改變頂部狀態(tài)條的顏色）
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
- 在 web app 應(yīng)用下狀態(tài)條（屏幕頂部條）的顏色择诈；
- 默認(rèn)值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）出皇；
D. name 屬性的 format-detection 值（忽略頁面中的數(shù)字識別為電話號碼）
<meta name="format-detection" content="telephone=no" />
- 使設(shè)備瀏覽網(wǎng)頁時(shí)對數(shù)字不啟用電話功能（不同設(shè)備解釋不同羞芍，iTouch 點(diǎn)擊數(shù)字為存入聯(lián)系人，iPhone 為撥打電話）郊艘，忽略將頁面中的數(shù)字識別為電話號碼荷科。
- 若需要啟用電話功能將 telephone=yes 即可，若在頁面上面有 Google Maps, iTunes 和 YouTube 的鏈接會在ios設(shè)備上打開相應(yīng)的程序組件纱注。
