viewport在移動(dòng)設(shè)備上的兼容性介紹

移動(dòng)設(shè)備上的viewport分為layout viewport 、 visual viewport 和 ideal viewport 三類，其中的ideal viewport是最適合移動(dòng)設(shè)備的viewport，ideal viewport的寬度等于移動(dòng)設(shè)備的屏幕寬度，只要在css中把某一元素的寬度設(shè)為ideal viewport的寬度(單位用px)，那么這個(gè)元素的寬度就是設(shè)備屏幕的寬度了，也就是寬度為100%的效果。ideal viewport 的意義在于，無論在何種分辨率的屏幕下，那些針對ideal viewport 而設(shè)計(jì)的網(wǎng)站，不需要用戶手動(dòng)縮放，也不需要出現(xiàn)橫向滾動(dòng)條，都可以完美的呈現(xiàn)給用戶。 因?yàn)樗械膇phone的理想viewport寬度都是320px，所以讓H5頁面適應(yīng)所有的iphone手機(jī)以及安卓機(jī)型的簡單粗暴的方法是：設(shè)置viewport <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no"> meta viewport 標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動(dòng)設(shè)備的viewport問題。后來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持，事實(shí)也證明這個(gè)東西還是非常有用的。在蘋果的規(guī)范中，meta viewport 有6個(gè)屬性(暫且把content中的那些東西稱為一個(gè)個(gè)屬性和值)，如下：

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代表允許

這些屬性可以同時(shí)使用，也可以單獨(dú)使用或混合使用，多個(gè)屬性同時(shí)使用時(shí)用逗號(hào)隔開就行了。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com