更新時(shí)間:2021-03-31 來(lái)源:黑馬程序員 瀏覽量:
在傳統(tǒng)的PC端網(wǎng)頁(yè)開發(fā)中,并沒(méi)有使用過(guò)meta標(biāo)簽來(lái)設(shè)置視口,此時(shí)瀏覽器會(huì)按照默認(rèn)的布局視口寬度來(lái)顯示網(wǎng)頁(yè)。如果我們希望自己開發(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)行演示,具體如例2-2所示。
【例2-2】
(1)打開C:\web\chapter02目錄,將之前編寫的demo01.html文件復(fù)制為demo02.html。然后在demo02.html頁(yè)面中添加meta標(biāo)簽,具體代碼如下。
<head> <meta charset="UTF-8"> <title>Document</title> <!-- 添加meta標(biāo)簽 --> <meta name="viewport" content="width=device-width"> ……(原有代碼) </head>
(2)通過(guò)瀏覽器打開demo02.html,查看頁(yè)面的寬度,如圖1所示。
圖1 查看設(shè)置視口后的頁(yè)面寬度
在圖1中,頁(yè)面的寬度為414px,而當(dāng)前設(shè)備的寬度也是414px。由此可見,通過(guò)設(shè)置視口,即可將網(wǎng)頁(yè)的寬度設(shè)置為當(dāng)前設(shè)備的寬度。經(jīng)過(guò)設(shè)置后,網(wǎng)頁(yè)中的內(nèi)容也變大了。由此就實(shí)現(xiàn)了理想視口。
猜你喜歡: