viewport在行動裝置上的相容性介紹

行動裝置上的viewport分為layout viewport  、 visual viewport   #  #和

 

ideal viewport

#  三類，

其中的ideal viewport是最適合行動裝置的viewport，ideal viewport的寬度等於行動裝置的螢幕寬度，只要在css中把某一元素的寬度設為ideal viewport的寬度(單位用px)，那麼這個元素的寬度就是裝置螢幕的寬度了，也就是寬度為100%的效果。

ideal viewport 的意義在於，無論在何種解析度的螢幕下，那些針對ideal viewport 而設計的網站，不需要使用者手動縮放，也不需要出現橫向捲軸，都可以完美的呈現給用戶。

 

因為所有的iphone的理想viewport寬度都是320px，所以讓H5頁面適應所有的iphone手機以及安卓機型的簡單粗暴的方法是：設定viewport#   # width  的寬度，為正整數，或字串"width-device"設定頁面的初始縮放值，為一個數字，可以帶小數允許使用者的最小縮放值，為一個數字，可以帶小數height  的高度，這個屬性對我們來說並不重要，很少使用

	meta viewport 標籤首先由蘋果公司在其safari瀏覽器中引入的，目的就是解決行動裝置的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持，事實也證明這個東西還是非常有用的。在蘋果的規範中，meta viewport 有6個屬性(暫且把content中的那些東西稱為一個個屬性和值)，如下：
設定	layout viewport
	initial-scale
	#minimum-scale
	maximum-scale允許使用者的最大縮放值，為一個數字，可以帶小數
設定	layout viewport

user -scalable######是否允許使用者進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許##############這些屬性可以同時使用，也可以單獨使用或混合使用，多個屬性同時使用時用逗號隔開就行了。 ###

以上是viewport在行動裝置上的相容性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！