教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

如何通過(guò)meta標(biāo)簽設(shè)置視口？

更新時(shí)間:2020年09月10日16時(shí)38分 來(lái)源:傳智播客 瀏覽次數(shù):

在傳統(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è)置視口，示例代碼如下。



<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目錄，將之前編寫(xiě)的demo01.html文件復(fù)制為demo02.html。然后在demo02.html頁(yè)面中添加meta標(biāo)簽，具體代碼如下。


 1  <head>
 2   <meta charset="UTF-8">
 3   <title>Documenttitle>
 4   
 5   <meta name="viewport" content="width=device-width">
 6   ……（原有代碼）
 7  </head>


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


設(shè)置視口


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





猜你喜歡：


CSS中display、visiblity及overflow的作用和區(qū)別?


Web前端入門(mén)教程：html+css+JavaScript下載


input標(biāo)簽的type屬性匯總


                

                
                
                
                
                


0
分享到：










                
            

            
        

        
    



    
    

        
    

    
    

        


    

    




 



























 


	
	
	
	




	

	
和我們?cè)诰€交談！