移动端Vue禁止页面被缩放和放大

Posted 2023-04-16

参考技术A vue index 中有一个标签

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

我们把这条替换成

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

这样页面就不会被缩放和放大了

Vue项目在iOS移动端测试时点击input框页面放大问题

问题：

        点击input输入框等聚焦时Safari页面会整体放大，手动难以缩放回原页面大小。

“苹果觉得点击输入框放大是一个“很好”的体验，就擅自把页面给放大了。”

解决：

        禁止缩放，在index.html中添加meta设置：

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

拆解说明：

        initial-scale 属性控制页面最初加载时的缩放等级，即当页面第一次 load 的时候缩放比例。

        maximum-scale 属性控制允许用户缩放到的最大比例。

        minimum-scale 属性控制允许用户缩放到的最小比例。

        user-scalable 属性控制用户是否可以手动缩放。