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

全國咨詢/投訴熱線：400-618-4000

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

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

在傳統(tǒng)的PC端網(wǎng)頁開發(fā)中，并沒有使用過meta標(biāo)簽來設(shè)置視口，此時瀏覽器會按照默認(rèn)的布局視口寬度來顯示網(wǎng)頁。如果我們希望自己開發(fā)的網(wǎng)頁在瀏覽器中以理想視口的形式呈現(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è)備的寬度一致。也就是說，設(shè)備有多寬，布局視口就有多寬。


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


(1)打開C:\web\chapter02目錄，將之前編寫的demo01.html文件復(fù)制為demo02.html。然后在demo02.html頁面中添加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)通過瀏覽器打開demo02.html，查看頁面的寬度，如圖所示。


設(shè)置視口


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





猜你喜歡：


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


Web前端入門教程：html+css+JavaScript下載


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


                

                
                
                
                
                


0
分享到：










                
            

            
        

        
    



    
    

        
    

    
    

        


    

    




 



























 


	
	
	
	




	

	
和我們在線交談！