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