当设置这些内容无效时
需要给 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