如何設(shè)置視口？

更新時(shí)間:2020-09-10 來(lái)源:黑馬程序員瀏覽量:

在傳統(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)行演示。

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

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

(2)通過(guò)瀏覽器打開(kāi)demo02.html，查看頁(yè)面的寬度，如圖所示。

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

在圖中，頁(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)了理想視口。

猜你喜歡：

布局視口、視覺(jué)視口和理想視口分別是什么?

px em rem這三者有什不同?

vue中keep-alive的表達(dá)方式

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