处理移动端的常见的兼容性的问题都有啥？

Posted 2023-03-25

参考技术A 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-cleardisplay:none;
14.关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格可以通过正则去掉
this.value = this.value.replace(/\u2006/g, ''); （BY三人行慕课）