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