以前做pc端，也会遇到兼容性的问题， 不过 说实话，脑海里全是ie的问题，并没有什么可特别注意的，可能是我不善总结，现在做移动端（本来 觉得 移动端很easy，所以没放在眼里），so，我错了，我为自己的轻视高傲买单！
最近就遇见了一些兼容性bug，从网上找了资料。
先说一下viewport
先上模板
< ;m eta charset="utf-8"> <!--主要I是强制让文档的 宽 度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。--> <meta content="width=device-width,in IT ial -s cale=1.0,maximum-scale=1.0,user-scalable=no" n am e="viewport"> <!--这个也是iphone私有标签，允许全屏浏览。--> <meta content="yes" name="apple- mobile -web-app-capable"> <!- -i phone的私有标签，iphone顶端状态条的样式。--> <meta content="black" name="apple-mobile-web-app- stat us-bar-style"> <!--禁止数字自动识别为 电 话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不 生效 的。--> <meta content="telephone=no" name="format- detect ion"> <!--禁止em ai l识别--> <meta content="email=no" name="format-detection">
写背景图时最好加上top left 或者 0 0 不然写运动效果时容易出现跳
禁止复制、选中文本
.el {
- webkit - user-select : none;
-moz-user-select: none;
-kht ML -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、key Press 支持不是很好, 用input监听键盘keyup事件，在 安卓 手机浏览器中是可以的，但是在ios手机浏览器中用 输入法 输入之后，并未立刻相应keyup事件，只有在通过删除之后才可以响应
方法：可以用html5的oninput事件去代替keyup
<input ty PE ="text" id=" test Input">
<script type="text/javascript">
document.getElementById('input').addEventListener('input', function(e){
VAR value = e.t arg et.value;
});
</script>
ios 设置input 按钮样式会被默认样式覆盖
解决方式如下：
input,textarea {
border: 0;
-webkit-appearance: none;
}
消除 IE10 里面的那个叉号:input:-ms-clear{dis play :none;}
手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象
flex布局对于低版本的安卓，不支持flex-wrap:wrap属性，但是ios系统支持换行属性，这个时候如何解决呢？当然是不使用换行，用其他方式代替。
.box{
display: -webkit-box;
/* 老版本语法: Safari, iOS, And ROI d br owser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms- flexbox ; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Ch rom e 21+ */
display: flex; /* 新版本语法: opera 12.1, Firefox 22+ */
}
input 的placeholder属性会使文本位置偏上
line-h ei ght: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法
input type=number之后，pc端出现上下箭头
input :: -webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
mar gin : 0;
}
实现android和ios系统手机打开相机并可选择相册功能
<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>
$(function () {
//获取浏览器的userAgent,并转化为小写
var ua = navigator.userAgent.toLowerCase();
//判断 是否 是苹果手机，是则是true
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if (isIos) {
$("input:file").removeAttr("capture");
};
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 浅谈Html5移动端ios/Android兼容性总结 全部内容，希望文章能够帮你解决 浅谈Html5移动端ios/Android兼容性总结 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于浅谈Html5移动端ios/Android兼容性总结的详细内容...