移動設備視口概念viewport

視口指的是移動設備中的設備屏幕窗口。

在移動端瀏覽器當中，存在着兩種視口，一種是可見視口（也就是咱們說的設備大小），另外一種是視窗視口（網頁的寬度是多少）。什麼是可見視口，什麼又是視窗視口呢？此處舉一個例子：若是咱們的屏幕是320像素*480像素的大小（iPhone4），假設在瀏覽器中，320像素的屏幕寬度可以展現980像素寬度的內容。那麼320像素的寬度就是可見視口的寬度，而可以顯示的980像素的寬度就是視窗視口的寬度。

 

爲了顯示更多的內容，大多數的瀏覽器會把本身的視窗視口擴大，簡易的理解，就是讓本來320像素的屏幕寬度可以容下980像素甚至更寬的內容（將網頁等比例縮小）。

常見viewport數值

• iPhone：980
• iPad：1024
• Android：980
• WinPhone：1024

爲了讓用戶可以看清晰設備中的內容，所以咱們並不讓瀏覽器按照默認的viewport進行展現。此時就須要進行設置，要儘可能保持分辨率和媒體設備視口大小比例爲1：1，從而獲得最佳的顯示效果。

進行視口的設置有兩種不一樣的方法，一種是在meta標籤當中，進行視口的設置，經過調整屬性值設置視口的具體大小。另外一種是使用@viewport進行設置。相比之下，meta更加好用且兼容良好。所以，在此我僅講解第一種設置方法。

窗口默認顯示效果

 

 

歡迎你們互相學習交流。獨行冰海

設置視口

將視口設置爲320像素

當前的顯示狀態

 

將視口設置爲設備寬度

將視口設置爲設備寬度，並在最初的時候以放大2倍的方式顯示

將視口設置爲設備寬度，並容許縮放，最大放大到2倍，最小縮小到1/2

將視口設置爲設備寬度，並禁止縮放

視口的相關知識點

• width 設定佈局視口寬度
• height 設定佈局視口高度
• initial-scale 設定頁面初始縮放比例（0-10.0）
• user-scalable 設定用戶是否能夠縮放（yes/no）
• minimum-scale 設定最小縮小比例（0-10.0）
• maximum-scale 設定最大放大比例（0-10.0）
• target-densitydpi* 設定目標屏幕的dpi（device-dpi）

結束~！