當(dāng)你用手機(jī)瀏覽器打開傳統(tǒng)網(wǎng)站是,手機(jī)會(huì)默認(rèn)以980像素的大小顯示頁面,雖然可以顯示全部,但是全部都縮小了,看起來非常不清晰,需要局部放大才能看清,這樣的用戶體驗(yàn)明顯不能滿足需求,于是方維網(wǎng)絡(luò)教大家如何使用好viewport,不但safari瀏覽器,其他瀏覽器也支持,他可以讓手機(jī)用固定的像素來顯示頁面,這樣就可以完美解決這個(gè)問題。
那么如何使用viewport呢?viewport是網(wǎng)頁meta中定義的,其主要作用是適合移動(dòng)設(shè)備的屏幕大小。如以下代碼
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
該代碼的作用是指定頁面寬度為設(shè)備的寬度,縮放比例為1:1,不允許用戶縮放大小。
其中width指定虛擬窗口的屏幕寬度大小
height指定虛擬窗口的屏幕高度大小
initial-scale指定初始縮放比例
maximum-scale指定允許用戶縮放的最大比例
maximun-scale指定允許用戶縮放的最小比例
user-scalable指定是否允許手動(dòng)縮放