一次面試前端開發,被要求詳解 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
該meta標簽的作用是讓當前viewport的寬度等於設備的寬度,同時不允許用戶手動縮放。也許允不允許用戶縮放不同的網站有不同的要求,但讓viewport的寬度等於設備的寬度,這個應該是大家都想要的效果,如果你不這樣的設定的話,那就會使用那個比屏幕寬的默認viewport,也就是說會出現橫向滾動條。
1. name="viewport"
meta viewport 標簽首先是由蘋果公司在其safari瀏覽器中引入的,目的就是解決移動設備的viewport問題。后來安卓以及各大瀏覽器廠商也都紛紛效仿,引入對meta viewport的支持,事實也證明這個東西還是非常有用的。
2.content 屬性值 :
width:可視區域的寬度,值可為數字或關鍵詞device-width
height:同width
intial-scale:頁面首次被顯示是可視區域的縮放級別,取值1.0則頁面按實際尺寸顯示,無任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別,
maximum-scale用戶可將頁面放大的程序,1.0將禁止用戶放大到實際尺寸之上。
user-scalable:是否可對頁面進行縮放,no 禁止縮放