欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 焦点 > Vue项目移动端h5页面在IOS上点击input输入文本框页面会自动放大的问题

Vue项目移动端h5页面在IOS上点击input输入文本框页面会自动放大的问题

2025/11/23 17:16:40 来源:https://blog.csdn.net/JackieDYH/article/details/140693397  浏览:    关键词:Vue项目移动端h5页面在IOS上点击input输入文本框页面会自动放大的问题

当设置这些内容无效时

需要给 ios 和安卓 app 开发 h5 页面,在安卓上测试没有问题,但是 ios上点击输入框会导致页面缩放失败

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

原因

ios 在小屏设备上点击输入框的时候,如果 input 字体小于 16px 的时候会自动放大页面,提升阅读性。但实际不同场景下,我们的 ui 设计字体可能低于 16px

解决

在点击 input 的时候,把 input 的字体设置为 16px,然后 focus 的时候再改回我们自己的,在那一瞬间,ios 判断到 input 输入框字体为 16px,从而不放大我们的页面

@media screen and (max-width: 800px) {input,textarea,.ivu-select{font-size: 16px !important;}
}或者强行给这些输入文本都设置成16px

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词