行動裝置上的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
# | # meta viewport 標籤首先由蘋果公司在其safari瀏覽器中引入的，目的就是解決行動裝置的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持，事實也證明這個東西還是非常有用的。在蘋果的規範中，meta viewport 有6個屬性(暫且把content中的那些東西稱為一個個屬性和值)，如下： |
width | 設定 |
layout viewport |
的寬度，為正整數，或字串"width-device"
|
initial-scale |
設定頁面的初始縮放值，為一個數字，可以帶小數
|
#minimum-scale |
允許使用者的最小縮放值，為一個數字，可以帶小數
|
maximum-scale允許使用者的最大縮放值，為一個數字，可以帶小數
|
height
| 設定 |
layout viewport |
的高度，這個屬性對我們來說並不重要，很少使用
user -scalable######是否允許使用者進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許##############這些屬性可以同時使用，也可以單獨使用或混合使用，多個屬性同時使用時用逗號隔開就行了。 ###
以上是viewport在行動裝置上的相容性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
