H5 兼容性问题汇总
2019-05-21 本文已影响0人
不醒的梦最美
1、
<meta charset="utf-8">
<!--主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--这个也是iphone私有标签，允许全屏浏览。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有标签，iphone顶端状态条的样式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。-->
<meta content="telephone=no" name="format-detection">
<!--禁止email识别-->
<meta content="email=no" name="format-detection">
2、h5 fixed 用 absolute 替代，fixed 在IOS上兼容性有问题
body{ height:100%;position:relative;}
.container{height:100%;overflow:auto;}
.fixed-container{position:absolute;}
<body>
<!-- 不定位的内容 -->
<div class="container"></div>
<!-- 原fixed的内容 -->
<div class="fixed-container"></div>
</body>
3、h5 ios移动端，键盘收起以后页面不归位
// ios 键盘回落
$('input,textarea').on('blur',function(){
window.scroll(0,0);
});
4、ios 滚动卡顿问题
-webkit-overflow-scrolling:touch
5、ios input 标签readonly属性依然会获取焦点，ios 键盘获可以切换input，获取焦点。
有可能会导致覆盖在上面的元素显示出光标
$('input').on('focus',function(){
$('.dialog').hide();
})
