如何設(shè)置視口？

更新時間:2020-09-10 來源:黑馬程序員瀏覽量:

在傳統(tǒng)的PC端網(wǎng)頁開發(fā)中，并沒有使用過meta標(biāo)簽來設(shè)置視口，此時瀏覽器會按照默認的布局視口寬度來顯示網(wǎng)頁。如果我們希望自己開發(fā)的網(wǎng)頁在瀏覽器中以理想視口的形式呈現(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è)備的寬度一致。也就是說，設(shè)備有多寬，布局視口就有多寬。

為了使讀者更好地理解，接下來通過案例進行演示。

(1)打開C:\web\chapter02目錄，將之前編寫的demo01.html文件復(fù)制為demo02.html。然后在demo02.html頁面中添加meta標(biāo)簽，具體代碼如下。

<head>
   <meta charset="UTF-8">
   <title>Documenttitle>
   <meta name="viewport" content="width=device-width">
  ……（原有代碼）
</head>

(2)通過瀏覽器打開demo02.html，查看頁面的寬度，如圖所示。

1599729726042_設(shè)置視口.png

在圖中，頁面的寬度為414px，而當(dāng)前設(shè)備的寬度也是414px。由此可見，通過設(shè)置視口，即可將網(wǎng)頁的寬度設(shè)置為當(dāng)前設(shè)備的寬度。經(jīng)過設(shè)置后，網(wǎng)頁中的內(nèi)容也變大了。由此就實現(xiàn)了理想視口。

猜你喜歡：

布局視口、視覺視口和理想視口分別是什么?

px em rem這三者有什不同?

vue中keep-alive的表達方式

上一篇：布局視口、視覺視口和理想視口分別是什么？ 下一篇：視口設(shè)置時content屬性常用參數(shù)