移动端兼容性问题记录[摘抄记录]

Posted 2021-09-05 小小潜力股i

1.安卓浏览器看北京图片 ,有些设备比较模糊 .

看不清是因为devicePixelRatio的问题，可以使用2倍的背景图代替img标签 。

2.图片加载慢的问题 

面对在手机上加载慢的问题 , 一般使用的是canvas方法加载的 [没有实践过]

具体的canvas API参见:http://javascript.ruanyifeng.com/htmlapi/canvas.html

3.如果手机端不需要兼容IE浏览器 ,一般会使用zeptojs,

zeptojs内置了Touch events 方法 ,具体可以看http://zeptojs.com/#Touch events

4.防止手机中网页的放大缩小

设置meat中的viewport

设置了DTD的方式是XHTML的写法，假如我们页面运用的是html5，可以不用设置DTD,直接声明。
使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。
但是为了更好的兼容，我们会使用完整的viewport设置。

当然 user-scalable = 0 或者 user-scalable = no ,都是可以的

5.apple-mobile-web-app-capable

apple-mobile-web-app-capable是设置Web应用是否以全屏模式进行展示的

6.format-detection 

format-detection是指是否自动识别电话号码

7.html5调用安卓或ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了

8.html的GPS定位功能

http://www.jb51.net/post/html5_GPS_getCurrentPosition

9.禁止复制、选中文本

Element {-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
}

10.长时间按住页面出现闪退 

element {
-webkit-touch-callout:none;
}

11.iphone及ipad下输入框默认内阴影

Element{
-webkit-appearance:none;
}

12.ios和android下触摸元素时出现半透明灰色遮罩

Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}

设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。
后面一篇文章有详细介绍，地址：http://www.jb51.net/post/phone_web_ysk

 

13.active兼容处理 即 伪类 :active 失效

方法一：body添加ontouchstart
方法二：js给 document 绑定 touchstart 或 touchend 事件