HTML5 定義文檔視口
■知識點
在移動Web開發(fā)中，經常會遇到viewport (視口），即瀏覽器顯示頁面內容的屏幕區(qū)域。一般移動設備的瀏覽器默認都設置一個<meta name="viewport">標簽，定義一個虛擬的布局視口，用于解決早期頁面在手機上顯示的問題。
iOS、Android基本都將這個視口分辨率設置為980px，所以桌面網頁基本能夠在手機上呈現(xiàn)，只不過看上去很小，用戶可以通過手動縮放網頁進行閱讀。這種方式用戶體驗很差，建議使用<meta name="viewport">標簽設置視口大小。
<meta name="viewport">標簽的設置代碼如下：
<meta id=nviewportn name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=l; user-scalable=no;">
各屬性說明如表所示。
屬 性 | 取 值 | 說 明 |
width | 正整數(shù)或device-width | 定義視口的寬度，單位為像素 |
height | 正整數(shù)或 device-height | 定義視口的高度，單位為像素，一般不用 |
initial-scale | f0.0-10.01 | 定義初始縮放值 |
minimum-scale | [0.0-10.01 | 定義縮小最小比例，它必須小于或等于maximum-scale設置 |
maximum-scale | [0.0-10.01 | 定義放大最大比例，它必須大于或等于minimum-scale設罝 |
user-scalable | yes/no | 定義是否允許用戶手動縮放頁面，默認值為yes |
■實例設計
下面示例在頁面中輸入一個標題和兩段文本，如果沒有設置文檔視口，則在移動設備中所呈現(xiàn)效果 如圖1.6所示；而設置了文檔視口之后，所呈現(xiàn)效果如圖所示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設置文檔視口</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<h1>width=device-width,initial-scale=1</h1>
<p>width=device-width將layout viewport（布局視口）的寬度設置 ideal viewport（理想視口）的寬度。</p>
<p>initial-scale=1表示將 layout viewport （布局視口）的寬度設置為 ideal viewport（理想視口）的寬度，</p>
</body>
</html>
湘公網安備:43011102000856號 
點擊加載更多評論>>