HTML中meta=“viewport”的介绍

viewport就是浏览器上用来显示网页的那部分区域

• layout viewport:整个网页所占据的区域（包括可视也包括不可视的区域）  默认的
• visual viewport:网页在浏览器上的可视区域（浏览器中能够看见的区域）
• ideal viewport:ideal viewport是一个能完美适配移动设备的viewport（没有固定尺寸，就是屏幕的宽度）

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />

layout viewport是默认的，但是由于移动设备比pc端的可视区域小，所以当页面在移动设备上时，字体会很小或出现横向滚动条。为解决此问题，一般会在head里加入代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

/*width=device-width能使所有浏览器当前的viewport宽度变成ideal viewport的宽度，initial-scale=1是将页面的初始缩放值设为1。*/

用来将viewport的宽度变成ideal viewport的宽度，防止横向滚动条出现。

• width：设置layout viewport 的宽度，为一个正整数，或字符串”width-device”
• initial-scale：设置页面的初始缩放值，为一个数字，可以带小数
• minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数
• maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数
• height ：设置layout viewport 的高度，这个属性对我们并不重
• user-scalable：是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

 

转载于:https://www.cnblogs.com/M-miao/p/11315220.html