位置：首頁(yè) > 軟件操作教程 > 編程開發(fā) > HTML > 問(wèn)題詳情

HTML5 定義文檔視口

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-20

    ■知識(shí)點(diǎn)

    在移動(dòng)Web開發(fā)中，經(jīng)常會(huì)遇到viewport (視口），即瀏覽器顯示頁(yè)面內(nèi)容的屏幕區(qū)域。一般移動(dòng)設(shè)備的瀏覽器默認(rèn)都設(shè)置一個(gè)<meta name="viewport">標(biāo)簽，定義一個(gè)虛擬的布局視口，用于解決早期頁(yè)面在手機(jī)上顯示的問(wèn)題。

    iOS、Android基本都將這個(gè)視口分辨率設(shè)置為980px，所以桌面網(wǎng)頁(yè)基本能夠在手機(jī)上呈現(xiàn)，只不過(guò)看上去很小，用戶可以通過(guò)手動(dòng)縮放網(wǎng)頁(yè)進(jìn)行閱讀。這種方式用戶體驗(yà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;">

各屬性說(shuō)明如表所示。

屬 性

取 值

說(shuō) 明

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

定義是否允許用戶手動(dòng)縮放頁(yè)面，默認(rèn)值為yes

■實(shí)例設(shè)計(jì)

下面示例在頁(yè)面中輸入一個(gè)標(biāo)題和兩段文本，如果沒有設(shè)置文檔視口，則在移動(dòng)設(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>

image.png

繼續(xù)查找其他問(wèn)題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部