首頁技術(shù)文章正文

通過meta標(biāo)簽可以實(shí)現(xiàn)理想視口嗎？

更新時(shí)間:2021-03-31 來源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif


在傳統(tǒng)的PC端網(wǎng)頁開發(fā)中，并沒有使用過meta標(biāo)簽來設(shè)置視口，此時(shí)瀏覽器會(huì)按照默認(rèn)的布局視口寬度來顯示網(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è)備有多寬，布局視口就有多寬。

為了使讀者更好地理解，接下來通過案例進(jìn)行演示，具體如例2-2所示。

【例2-2】

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

   <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 添加meta標(biāo)簽 -->
    <meta name="viewport" content="width=device-width">
    ……（原有代碼）
   </head>

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

理想視口

圖1 查看設(shè)置視口后的頁面寬度

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




猜你喜歡：

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

視口設(shè)置時(shí)content屬性常用參數(shù)

什么是視口？為什么會(huì)有視口？    

黑馬程序員HTML&JS+前端培訓(xùn)

分享到：
在線咨詢 我要報(bào)名
和我們在線交談！