参考文章

【日常问题记录】移动端

问题以及解决方案

问题：使用 Vant 组件库的表单组件 van-input 时，IOS 系统点击输入框后，屏幕会自动放大。

环境：Vue 3

解决：在 index.html 中添加以下元数据

1
2
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

这些元数据的作用如下：

  • initial-scale：控制页面初次加载时的缩放等级。
  • maximum-scale：控制页面可以被用户缩放的最大比例。
  • minimum-scale：控制页面可以被用户缩放的最小比例。
  • user-scalable：决定用户是否可以手动缩放页面。通过将 user-scalable 设置为 no，我们可以禁止用户对页面进行缩放。