H5移动端iosAndroid兼容性总结
先说⼀下viewport
先上模板
<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">
写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳
禁⽌复制、选中⽂本
.el {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
苹果⼿机固定定位有bug 检查html和body是不是设置了overflow-x:hidden; 给不同屏幕⼤⼩的⼿机设置特殊样式
@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}
IOS中input键盘事件keyup、keydown、keypress⽀持不是很好, ⽤input监听键盘keyup事件，在安卓⼿机浏览器中是可以的，但是在ios⼿机浏览器中⽤输⼊法输⼊之后，并未⽴刻相应keyup事件，只有在通过删除之后才可以响应
⽅法：可以⽤html5的oninput事件去代替keyup
<input type="text" id="testInput">
<script type="text/javascript">
var value = e.target.value;
});
</script>
ios 设置input 按钮样式会被默认样式覆盖
解决⽅式如下：
input,textarea {
border: 0;
-webkit-appearance: none;
}
消除 IE10 ⾥⾯的那个叉号:
input:-ms-clear{display:none;}
⼿机上的flex布局时会有兼容性问题，只⽤新版本的会出现安卓⼿机不识别的现象 flex布局对于低版本的安卓，不⽀持flex-wrap:wrap属性，但是ios系统⽀持换⾏属性，这个时候如何解决呢？当然是不
使⽤换⾏，⽤其他⽅式代替。
.box{
display: -webkit-box;
/* ⽼版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* ⽼版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
input 的placeholder属性会使⽂本位置偏上
line-height: （和input框的⾼度⼀样⾼）---pc端解决⽅法
line-height：normal ---移动端解决⽅法
input type=number之后，pc端出现上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
实现android和ios系统⼿机打开相机并可选择相册功能
<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>
$(function () {
//获取浏览器的userAgent，并转化为⼩写
var ua = LowerCase();
//判断是否是苹果⼿机，是则是true
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if (isIos) {
$("input:file").removeAttr("capture");
};
})
移动端 HTML5 audio autoplay 失效问题
这个不是 BUG，由于⾃动播放⽹页中的⾳频或视频，会给⽤户带来⼀些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁⽌⾃动播放和使⽤ JS 的触发播放，必须由⽤户来触发才可以播放。
解决⽅法思路：先通过⽤户 touchstart 触碰，触发播放并暂停（⾳频开始加载，后⾯⽤ JS 再操作就没问题了）。
解决代码：
document.addEventListener('touchstart',function() {
});
移动端 video在部分android机播放之后浮在最上层，设置z-index⽆效
这个⽬前没有好的办法解决
情景⼀：页⾯有视频，点击页⾯按钮显⽰弹出层（⽐如让⽤户输⼊⽤户信息），这时候视频会出现在弹出层上⾯，是不是很-d疼？
⽅案：点击按钮时候把video隐藏hide，关闭弹出层show，过程中视频声⾳还在
情景⼆：页⾯很长，往下翻滚时，视频在播放，脱离⽂档流
⽅案：页⾯滚动到某⼀合适位置把video隐藏hide，回滚到某⼀位置show，过程中视频声⾳还在
有些说position可以解决，我没有试
关于 iOS 系统中，中⽂输⼊法输⼊英⽂时，字母之间可能会出现⼀个六分之⼀空格
this.value = place(/\u2006/g,'');
关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不⼀致等)
iOS 浏览器横屏时会重置字体⼤⼩，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌⾯版 Safari 的字体缩放功能会失效，因此最佳⽅案是将 text-size-adjust 为 100% 。
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
移动端点击300ms延迟
原因：浏览器兴起初期，为了判断⽤户是双击还是单击，就设置了⼀个时间段300ms，⽤户单击后300ms后做事件处理，如果在300ms 内连续点击，就判断为双击，做双击处理事件。
所以现在⽤click绑定事件呢，就会有300ms延迟的问题。
300ms尚可接受，不过因为300ms产⽣的问题，我们必须要解决。300ms导致⽤户体验并不是很好，解决这个问题，我们⼀般在移动端⽤tap事件来取代click事件。
推荐两个js，⼀个是fastclick，⼀个是tap.js
移动端点透问题
案例如下：
<div id="haorooms">点头事件测试</div>
<a href="www.baidu">www.baidu</a>
div是绝对定位的蒙层，并且z-index⾼于a。⽽a标签是页⾯中的⼀个链接，我们给div绑定tap事件：
document有安卓版吗
$('#haorooms').on('tap',function(){
$(this).hide();
});
我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。
原因：
touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间⼤概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下⾯的a链接上。
解决：
$("#haorooms").on("touchend",function(event) {
event.preventDefault();
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。