今天在研究html 5和framework 7時,在html示例中看到下面這一行:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
不明白其中各屬性值代表什么意思,於是到網上找到相關資料,記錄下來:
viewport標記,用於指定用戶是否可以縮放Web頁面,並對相關的選項進行設定。
width 和height 指令分別指定視區的邏輯寬度和高度。它們的值可以是以像素為單位的數字,也可以是一個特殊的標記符號。如上文代碼中device-width即表示,視區寬度應為設備的屏幕寬度。類似的,device-height即表示設備的屏幕高度。
user-scalable指定用戶是否可以縮放視區,即縮放Web頁面的視圖。值為yes時允許用戶進行縮放,值為no時不允許縮放。
initial-scale用於設置Web頁面的初始縮放比例。默認的初始縮放比例值因智能手機瀏覽器的不同而有所差異,通常情況下,設備會在瀏覽器中呈現出整個Web頁面。設為1.0則顯示未經縮放的Web頁面。
maximum-scale和minimum-scale用於設置用戶對於Web頁面縮放比例的限制。值的范圍為0.25~10.0之間。
所有智能手機瀏覽器都支持<meta name = "viewport" .......>標記的width和user-scalabel指令,但是Opera Mobile不使用user-scalable指令,而是主張用戶應始終保留在移動瀏覽器中縮放Web頁面的能力。