什么是viewport
指的是移動設備瀏覽器中放置頁面的一個虛擬的窗口即用來顯示網頁的那一部分區域,相當於PC端瀏覽器可視區
在移動端開發中,常將視口抽象划分為布局視口、視覺視口 和 理想視口。
布局視口,移動設備默認的viewport即布局視口,寬度介於768px ~1024px之間,不進行縮放的話,比瀏覽器窗口要大。
視覺視口:視覺視口是用戶正在看到的網頁的區域,即屏幕寬度。
理想視口:布局視口對用戶不友好,沒有考慮到手機尺寸,所以蘋果公司引入理想視口概念。
viewport設置
如今可以在絕大部分瀏覽器里(即主流的安卓瀏覽器和
IOS),都支持對viewport的控制viewport 6個屬性
width=widthdevice : 設置viewport的寬度(即瀏覽器的寬),這里可以是一個整數,也可以是“widthdevice”
initial-scale = 1.0 : 頁面初始的縮放比例1:1
minimumscale =1.0: 允許用戶的最小縮放比例 1:1
maximumscale=1.0 :允許用戶的最大縮放比例 1:1
height : 設置viewport的高度(我們一般而言並不能用到)
user-scalable=no ,禁止用戶手動縮放