首頁技術(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)名
和我們在線交談!