移動設(shè)備上的viewport分為layout viewport蝗拿、visual viewport和ideal viewport三類欢顷。
layout viewport是瀏覽器設(shè)置的顯示大小，由瀏覽器廠商決定，一般為980px。
visual viewport是屏幕支持的分辨率大小，由硬件決定捂寿。
ideal viewport是用戶設(shè)置的大小，由<meta name="viewport">標(biāo)簽決定孵运。
例如：
頁面原始寬度1000px秦陋，layout viewport=980px，visual viewport=640px
這時候治笨，頁面會在640px的空間驳概，（縮放）顯示980px的內(nèi)容。
移動設(shè)備默認(rèn)的ideal viewport是layout viewport旷赖。
如果設(shè)置ideal viewport=320px顺又，則會在640px的空間，（放大）顯示320px的內(nèi)容等孵。
<!-- 讓ideal viewport的寬度等于設(shè)備的寬度稚照，同時不允許用戶手動縮放。-->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
>
<u></u>width：設(shè)置ideal viewport 的寬度，為一個正整數(shù)果录，或字符串"width-device"
<u></u>initial-scale：設(shè)置頁面的初始縮放值上枕，為一個數(shù)字，可以帶小數(shù)弱恒，小于1表示縮放
<u></u>minimum-scale：允許用戶的最小縮放值辨萍，為一個數(shù)字，可以帶小數(shù)
<u></u>maximum-scale：允許用戶的最大縮放值返弹，為一個數(shù)字锈玉，可以帶小數(shù)
<u></u>height：設(shè)置ideal viewport 的高度，這個屬性對我們并不重要义起，很少使用
<u></u>user-scalable：是否允許用戶進行縮放嘲玫，值為"no"或"yes"，yes代表允許并扇，no代表不允許
注：
隨著市場上一些高分辨率設(shè)備出現(xiàn)，
例如iPhone3GS與iPhone4S物理大小相同（3.5英寸）抡诞，但是分辨率不同穷蛹。
（iPhone3GS=480px*320px，iPhone4S=960px*640px）
所以昼汗，最好讓設(shè)備顯示適合屏幕物理大小的內(nèi)容肴熏。
例如，3.5英寸的設(shè)備上都顯示320px的內(nèi)容顷窒。
因此蛙吏，device-width是與設(shè)備的物理大小相關(guān)的，
不同的設(shè)備擁有不同的device-width鞋吉，可以到Viewport Sizes查看鸦做。
例如：
iPhone<=5s：device-width=320px
iPhone=6：device-width=375px
iPhone=6p：device-width=414px
參考：
A tale of two viewports — part one
A tale of two viewports — part two
Meta viewport
移動前端開發(fā)之viewport的深入理解
