H5与IOS交互常见问题
作者:互联网
IOS内嵌H5软键盘收回页面底部空白不回滚的bug
$("input,select,textarea").blur(function(){
setTimeout(function() {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
})
//原理:当输入框失去焦点后,重新让滚动条滚动到之前的位置
IOS内嵌H5点击输入框页面放大bug
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width" />
<!--看百度上大多数说设置meta来禁止页面缩放使页面缩放为1:1但是还是无法解决
原因是ios在小屏设备(如iphone 5s/6/6s/7/8...)上点击输入框的时候,
如果input字体小于16px的时候会自动放大页面,提升阅读性。
但实际不同场景下,我们的ui设计字体可能低于16px。所以有如下解决方法-->
input,input:focus,
textarea,textarea:focus,
select,select:focus{
font-size: 16px !important;
}
/*原理:在点击input的时候,把input的字体设置为16px,然后focus的时候再改回我们自己的,
在那一瞬间,ios判断到input输入框字体为16px,从而不放大我们的页面*/
标签:16px,常见问题,textarea,IOS,focus,H5,input,select 来源: https://blog.csdn.net/weixin_47316799/article/details/105949101