半点优化网 http://www.bdxc.net/
当前位置首页 > 网站技术问题> 正文

处理移动端的常见的兼容性的问题都有什么?

2022-02-19 23:35:45 暂无评论 258 网站技术问题 兼容性   常见   端的

1.定位问题:ios

2.写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳

3.防止手机中网页放大和缩小:<meta name=viewport content=user-scalable=0 />

4.设置Web应用是否以全屏模式运行:<meta name=apple-mobile-web-app-capable content=yes>,content的默认值是no

5.自动识别电话号码:<meta name=format-detection ontent=telephone=no>,telephone=no可以禁用这功能,默认值是no

6.禁止复制、选中文本:
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
7.设置缓存:
<meta http-equiv=Cache-Control content=no-cache />
8.苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;

9.IOS手机中如果出现一个元素的层级非常高可还是被别的元素遮盖的,那么就将该元素与别的元素同级

10.给不同屏幕大小的手机设置特殊样式:
@media only screen and (min-device-width : 320px)
and (max-device-width : 375px){ }
11.IOS中input键盘事件keyup、keydown、keypress支持不是很好, 用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才可以响应
方法:可以用html5的oninput事件去代替keyup
<input type=text id=testInput>
<script type=text/javascript>
document.getElementById('input').addEventListener('input', function(e){
var value = e.target.value;
});
</script>
12.ios 设置input 按钮样式会被默认样式覆盖
解决方式如下:
input,
textarea {
border: 0;
-webkit-appearance: none;
}
13.消除 IE10 里面的那个叉号:
input:-ms-clear{display:none;}
14.关于 iOS 系统中,中文输入法输入英文时,字母之间可能会出现一个六分之一空格可以通过正则去掉
this.value = this.value.replace(/\u2006/g, ''); (BY三人行慕课)

猜你喜欢