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