标签：none http 记录 摘抄 html5 兼容性问题 webkit select user

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 事件

 

标签：none,http,记录,摘抄,html5,兼容性问题,webkit,select,user
来源： https://www.cnblogs.com/zxli/p/15231714.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。