<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
viewport:视角
device-width:view-point的宽度;表示view-point的宽度与设备的实际宽度相同
initial-scale=1:初始缩放比例为1
maximum-scale=1:允许用户缩放的最大比例为1
user-scalable:是否允许用户进行缩放;yes或true为允许,no或false为不允许
移动端和pc端不同。现在手机屏幕分辨率越来越高,但屏幕大小并没有太大的变化,这意味着每个物理像素里装了多个实际像素。
还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。
所以在做移动端开发时,为了使移动端的页面在不同的手机上同样的大小来显示,我们可以将页面的宽度固定,然后获取设备的宽度,可以得到我们之前设定的宽度与设备宽度的比例,再使用HTML5新增的viewport来对页面进行缩放,并固定不允许用户再重新缩放。