解决移动端点击放大出现x轴滚动条问题

测试一个移动端项目时，点击输入框准备输入时，却放大切出现x轴方向的固定条，如何解决这个问题呢？

解决

其实很简单，我们可以加一行 meta 声明。

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

这行 meta 标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放这样就不会出现横向滚动条。

属性说明

• width: 控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
• height: 和 width 相对应，指定高度。
• initial-scale: 初始缩放值。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为 1.0，那么这个页面不缩放。
• maximum-scale:最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为2.0，那么这个页面最多能放大2倍。
• minimum-scale:最小缩放。即允许的最小缩放程度。类比 maximum-scale
• user-scalable:用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。也可以是0和1。注意：如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。

另外：

• target-densitydpi:值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个。安卓中支持，当 target-densitydpi=device-dpi 时， css中的1px会等于物理像素中的1px。

参考

• 禁止移动端safari浏览器双击放大事件
• 移动端适配之三：使用meta标签设置viewport