h5 移動端開發自適應 meta name="viewport"的使用總結

 

 

　　本文系我的理解，可能有偏差，僅供參考，謹慎採納！

 

佈局視口: 系統自帶 通常大於屏幕寬度

理想寬度:  設置頁面的viewport 的一個寬度，使不一樣的手機的佈局視口寬度儘可能接近可視窗口的值；

可視視口：即屏幕寬度

 

第一種狀況：不顯示地設置viewport：  若代碼中網頁寬度小於設備默認值 按 默認，大於設備默認則viewport的寬度變爲網頁的最大值。

那麼width的默認爲手機廠商自定義的 佈局視口layout viewport  寬度有980 1024等等，如： 手機寬度爲980，

　　1）若是網頁的全部元素寬度都小於這個寬度如980，此時width爲980，

　　2）若是頁面最寬的位置超過980，那麼width等於最大寬度。

補充：在ios中（安卓未測），若網頁高度<=設備高度，則viewport的寬度變爲網頁的最大值，寬度會產生滾動條；

　　提示：不是適配手機端的頁面建議不要設置viewport, 由系統自動縮放整個頁面。

第二種狀況：顯示設置viewport  爲理想寬度：即width=device-width, initial-scale=1.0  網頁中需寫適配代碼。

　　每一個移動設備瀏覽器中都有一個理想的寬度，這個理想的寬度是指css中的寬度，跟設備的物理寬度沒有關係，在css中，這個寬度就至關於100%的所表明的那個寬度。咱們能夠用meta標籤把viewport的寬度設爲那個理想的寬度，若是不知道這個設備的理想寬度是多少，那麼用device-width這個特殊值就好了，同時initial-scale=1也有把viewport的寬度設爲理想寬度的做用。因此，咱們可使用

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

只有這樣才能保證一樣的網站在不一樣分辨率的設備上看起來都是同樣或差很少的。

實際上，如今市面上雖然有那麼多不一樣種類不一樣品牌不一樣分辨率的手機，但它們的理想viewport寬度概括起來無非也就 320、360、38四、400等幾種，都是很是接近的，理想寬度的相近也就意味着咱們針對某個設備的理想viewport而作出的網站，在其餘設備上的表現也不會相差很是多甚至是表現同樣的。

 

第三種狀況： 顯示設置viewport  爲不理想寬度，即和理想尺寸差異很大，如 viewport的width=1000（目前理想設計稿寬度通常參考Iphone5 640I或 Iphone6 750）;

　　1）若是網頁不須要作適配： 必須viewport的寬度>代碼中網頁寬度，不然會由於寬度數值小而網頁寬度大致使頁面出現滾動條。

　　　        A.網頁寬度===viewport的寬度 則 滿屏，好比，你拿個3.5寸-320 * 480的iphone3 gs、3.5寸-640 * 960的iphone4或者9.7寸-1024*768的ipad2，雖然設備的分辨率不一樣,物理尺寸也不一樣，但你能夠經過設置viewport讓它們在瀏覽器裏有相同的分辨率。好比說，你的網站是800px寬，你能夠經過設置viewport的width=800，來讓你的網站在這三個不一樣的設備上都恰好滿屏顯示你的網站；

　　  　      B. 網頁寬度>viewport的寬度，則會出現滾動條；

　　　        C. 網頁寬度<viewport的寬度，則會和PC端窗口變大同樣的效果。 

　　2）若是網頁作適配：若是非要在適配(此時適配無心義，只是假如非要這麼操做。。。。有bing麼？)狀況下設置固定佈局視口寬度，則網頁寬度等於佈局視口寬度，這樣雖然不一樣手機都會滿屏，可是顯示會出現不一樣手機不一樣效果（看起來是viewport理想寬度下的總體放大或縮小），建議用第二種方式。

 

 

哦。。。 狀況有點多，

可是做爲一個細緻的碼農，

總之各類狀況都要考慮到吧。。。

僅供參考。。。

 

 ----------------------------------------------------

若有錯誤，歡迎評論指正、共同提升。[握手]    

歡迎轉載，轉載請註明：轉載自[ http://www.cnblogs.com/juneling ]