移動端開發之viewport

參考了不少資料，說說本身對viewport的理解

viewport分visual viewport和layout viewport，visual viewport能夠理解爲移動設備屏幕的可視區域，visual viewport的大小能夠理解爲就是品目可視區域的大小，而layout viewport則是存放咱們的網頁的。

爲何會有兩個viewport？

由於早期的網頁基本都是pc端的網頁，而pc端的分辨率大大高於移動端的分辨率(這裏移動端分辨率指的是移動端的物理像素)，因此爲了可以使pc端的網頁可以在移動端上正常顯示，因此出現了layout viewport。而瀏覽器廠商通常將layout viewport初始化爲寬度980px，固然也有的不是這個數字。

怎麼讓layout viewport可以在visual viewport中可以正常顯示

這就是縮放因子initial-scale的工做了，initial-scale表明layout viewport與visual viewport的比值，既一個佈局像素(css像素)表明幾個物理像素，好比initial-scale=2則表明一個物理像素表明兩個css像素；當咱們沒有設置meta的時候，瀏覽器會自動設置initial-scale，以便讓layout viewport可以徹底顯示在visual viewport中而不會出現橫向滾動條，好比你的移動設備物理像素寬度是360px，而layout viewport寬度爲980px，則瀏覽器會自動將initial-scale設置爲0.367346，以便不出現橫向滾動條。這是3.67346個css像素才站一個物理像素的位置，因此恰好不會出現橫向滾動條；當只設置了initial-scale而沒有設置layout viewport的時候，瀏覽器也會自動設置layout viewport，以時layout viewport恰好能在visual viewport中顯示，好比initial-scale=2，你的visual viewport是360px的時候，瀏覽器會自動將layout viewport寬度設置爲720px，由於此時一個css像素等於兩個物理像素的寬度，因此layout viewport恰好能在visual viewport中顯示徹底而不出現滾動條。

怎麼設置layout viewport的寬度

這就是縮放因子width的工做了，width能夠設置爲任意的大小或者device-width

width和initial-scale都存在時怎麼辦

瀏覽器會設置layout viewport寬度是二者單獨存在時計算的layout viewport較大的那一個，所以此時時可能出現橫向滾動條的，好比你的visual viewport是360，你設置width=720px,initial-scale=1此時layout viewport大於visual viewport並且一個css像素跟一個物理像素是同樣的，因此會出現橫向滾動條

ideal viewport

讓layout viewport的寬度和visual viewport的寬度相等，而且讓1個css像素等於1個物理像素，這就是移動端的最佳viewport，即  

 <meta name="viewport" content="width=600,initial-scale=1,maximum-scale=1,minimum-scale=1, user-scalable=no"/>

其餘屬性

maximum-scale：最大縮放因子

minimum-scale：最小縮放因子

user-scalable：是否容許用戶進行手動縮放

height：layout viewport的高度，這個屬性基本沒有用處

參考連接

http://www.cnblogs.com/2050/p/3877280.html

http://blog.doyoe.com/2015/10/20/mobile/%E7%A7%BB%E5%8A%A8%E5%89%8D%E7%AB%AF%E7%AC%AC%E4%BA%8C%E5%BC%B9%EF%BC%9A%E5%96%84%E7%94%A8meta/#more