什么是viewport viewport设置

什么是viewport

 

指的是移动设备浏览器中放置页面的一个虚拟的窗口即用来显示网页的那一部分区域，相当于PC端浏览器可视区

在移动端开发中，常将视口抽象划分为布局视口、视觉视口 和 理想视口。

布局视口，移动设备默认的viewport即布局视口，宽度介于768px ~1024px之间，不进行缩放的话，比浏览器窗口要大。

视觉视口：视觉视口是用户正在看到的网页的区域，即屏幕宽度。

理想视口：布局视口对用户不友好，没有考虑到手机尺寸，所以苹果公司引入理想视口概念。

 

viewport设置

如今可以在绝大部分浏览器里（即主流的安卓浏览器和

IOS），都支持对viewport的控制viewport 6个属性

width=width­device : 设置viewport的宽度（即浏览器的宽），这里可以是一个整数，也可以是“width­device”

initial-scale = 1.0 : 页面初始的缩放比例1:1

minimum­scale =1.0: 允许用户的最小缩放比例 1:1

maximum­scale=1.0 :允许用户的最大缩放比例 1:1

height : 设置viewport的高度（我们一般而言并不能用到）

user-scalable=no ，禁止用户手动缩放