HTML 移动页面自适应手机屏幕方法

使用meta标签：viewport

H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

在网页代码的头部，加入一行viewport元标签  下边的两个那个都可以的

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

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

 

 属性介绍：

属性名	取值	描述
width	正整数 或 device-width	定义视口的宽度，单位为像素
height	正整数 或 device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable	yes/no	定义是否允许用户手动缩放页面，默认值yes

 

width=device-width    width为设置layout viewport 的宽度，为一个正整数，”width-device”表示宽度是设备屏幕的宽度
initial-scale=1.0    设置页面的初始缩放值，可以是一个带小数的数字，1.0就是占网页的100%
minimum-scale=1.0    最小的缩放比例
maximum-scale=1.0    最大的缩放比例
user-scalable=no    是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许