更新時(shí)間:2021-03-31 來(lái)源:黑馬程序員 瀏覽量:
IT就到黑馬程序員.gif "學(xué)IT就到黑馬程序員")
在傳統(tǒng)的PC端網(wǎng)頁(yè)開(kāi)發(fā)中，并沒(méi)有使用過(guò)meta標(biāo)簽來(lái)設(shè)置視口，此時(shí)瀏覽器會(huì)按照默認(rèn)的布局視口寬度來(lái)顯示網(wǎng)頁(yè)。如果我們希望自己開(kāi)發(fā)的網(wǎng)頁(yè)在瀏覽器中以理想視口的形式呈現(xiàn)，就需要利用meta標(biāo)簽設(shè)置視口。
在meta標(biāo)簽中，將name屬性設(shè)為viewport，即可設(shè)置視口，示例代碼如下。
<meta name="viewport" content="width=device-width">
在上述代碼中，設(shè)置content="width=device-width"表示通知瀏覽器，布局視口的寬度應(yīng)該與設(shè)備的寬度一致。也就是說(shuō)，設(shè)備有多寬，布局視口就有多寬。
為了使讀者更好地理解，接下來(lái)通過(guò)案例進(jìn)行演示，具體如例2-2所示。
【例2-2】
（1）打開(kāi)C:\web\chapter02目錄，將之前編寫(xiě)的demo01.html文件復(fù)制為demo02.html。然后在demo02.html頁(yè)面中添加meta標(biāo)簽，具體代碼如下。
<head> <meta charset="UTF-8"> <title>Document</title> <!-- 添加meta標(biāo)簽 --> <meta name="viewport" content="width=device-width"> ……（原有代碼） </head>
（2）通過(guò)瀏覽器打開(kāi)demo02.html，查看頁(yè)面的寬度，如圖1所示。
圖1 查看設(shè)置視口后的頁(yè)面寬度
在圖1中，頁(yè)面的寬度為414px，而當(dāng)前設(shè)備的寬度也是414px。由此可見(jiàn)，通過(guò)設(shè)置視口，即可將網(wǎng)頁(yè)的寬度設(shè)置為當(dāng)前設(shè)備的寬度。經(jīng)過(guò)設(shè)置后，網(wǎng)頁(yè)中的內(nèi)容也變大了。由此就實(shí)現(xiàn)了理想視口。
猜你喜歡：
文章封面圖.png)
javaee
科列表頁(yè)面右側(cè)廣告圖.jpg)
python大數(shù)據(jù)
web
科列表頁(yè)面右側(cè)廣告圖230x148.jpg)
ui
據(jù)學(xué)科列表頁(yè)右側(cè).png)
cloud
科列表頁(yè)面右側(cè)廣告圖.jpg)
test
c
netmarket
pm
Linux
movies
robot
uids
AI
.jpg)
jdbc
JavaEE
鴻蒙應(yīng)用開(kāi)發(fā)
集成電路應(yīng)用開(kāi)發(fā)
人工智能開(kāi)發(fā)
AI+Linux云計(jì)算運(yùn)維
Python+大數(shù)據(jù)開(kāi)發(fā)
AI+設(shè)計(jì)
軟件測(cè)試
新媒體+短視頻
HTML&JS+前端
