Android、IOS浏览器的适配问题整理

相关知识点:

移动端、兼容/适配、 IOS点击事件300ms延迟、点击穿透、定位失败 ...

手机浏览器特有的事件:

onTouchmove 、 ontouched 、 ontouchstart 、 ontouchcancel。

使用Zepto的原因:

jQuery适用于PC端桌面环境，桌面环境更加复杂，jQuery需要考虑的因素非常多，尤其表现在兼容性上面。

与PC端相比，移动端的发展远不及PC端,手机上的带宽永远比不上pc端。

pc端下载jQuery到本地只需要1~3秒（90+K），但是移动端就慢了很多，2G网络下你会看到一大片空白网页在加载，这样用户可能就没打开的欲望了。

zepto解决了这个问题: 只有不到10K的大小，2G网络环境下也毫无压力，表现不逊色于jquery。

所以移动端开发首选框架，个人推荐zepto.js。

1. IOS移动端click事件300ms的延迟响应
移动设备上的web网页是有300ms延迟的，这样往往会造成按钮点击延迟甚至是点击失效。

此问题是由于区分单击事件和双击屏幕缩放的历史原因造成的。

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案。

比如在手机上用浏览器打开一个PC上的网页，可能看到的页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。

造成的后果: 用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

解决方案：

fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题
触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题
2. 一些情况下, 对非可点击元素(如label,span)监听click事件 , IOS不会触发
解决方案:

CSS增加 cursor: pointer;

3. 三星手机遮罩层下的input、select、a等元素可以被点击和focus(点击穿透)
问题发现于三星手机，这个在特定需求下才会有，因此如果没有类似问题的可以不看。

首先需求是浮层操作，在三星上被遮罩的元素依然可以获取focus、click、change，

解决方案有2种：

1.通过层显示以后加入对应的class名控制，截断显示层下方可获取焦点元素的事件获取
2.通过将可获取焦点元素加入的disabled属性，也可以利用属性加dom锁定的方式（disabled的一种变换方式）
4. 安卓浏览器看背景图时,有些设备会模糊
用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？

经过研究，是devicePixelRatio作怪。

因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960*640分辨率，在网页里只显示了480*320，这样devicePixelRatio＝2。

现在android比较乱，有1.5的，有2的也有3的。

想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。

例如一个div的宽高是100*100，背景图必须得200*200，然后background-size:contain;，这样显示出来的图片就比较清晰了。

代码可以如下：

background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;
display:inline-block;
width:100%;
height:50px;
5. H5页面有个很头疼的问题: 当输入框在最底部，点击软键盘后输入框会被遮挡。
可采用如下方式解决:

6. 消除 transition 闪屏
-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/
7. CSS3动画页面闪白,动画卡顿
解决方法:

1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
8. 阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}
9. Input 的placeholder会出现文本位置偏上的情况
PC端, 设置 line-height = height ;

移动端, 设置 line-height : normal;

10. 往返缓存问题
点击浏览器的回退，有时候不会自动执行js，特别是在mobile safari中。这与往返缓存(bfcache) 有关系。

解决方法：

window.onunload = function(){};
11. calc的兼容性处理
CSS3中的calc变量

在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。

Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：

div {
width: 95%;
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
}
12. 加上一个CSS3的属性后，所关联的元素的事件监听都会失效，相当于让元素变得“看得见，点不着”。
IE到11才开始支持，其他浏览器的当前版本基本都支持。

pointer-events : none;
详细介绍见这里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

13. 防止手机中网页放大和缩小
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
14. 上下拉动滚动条时卡顿、慢
body {
-webkit-overflow-scrolling:touch;
overflow-scrolling: touch;
}
Android3+ 和 iOS5+ 支持 C3的新属性: overflow-scrolling

15. 关于图片加载
关于图片加载很慢的问题，在手机开发一般用canvas方法加载：
具体的canvas API 参见：http://javascript.ruanyifeng.com/htmlapi/canvas.html

下面是一个可行的canvas例子:

<li><canvas></canvas></li>

js动态加载图片和li 总共举例17张图片！

var total = 17;
var zWin = $(window);
var render = function(){
var padding = 2;
var winWidth = zWin.width();
var picWidth = Math.floor( (winWidth-padding*3)/4 );
var tmpl =‘‘;
for(var i = 1; i <= totla; i++){
var p = padding;
var imgSrc = ‘img/‘ + i + ‘.jpg‘;
if( i%4 == 1){
p=0;
}
tmpl +=‘<li style="width:‘+picWidth+‘px;height:‘+picWidth+‘px;padding-left:‘+p+‘px;padding-top:‘+padding+‘px;"><canvas id="cvs_‘+i+‘"></canvas></li>‘;
var imageObj = newImage();
imageObj.index = i;
imageObj.onload = function(){
var cvs =$(‘#cvs_‘+this.index)[0].getContext(‘2d‘);
cvs.width = this.width;
cvs.height = this.height;
cvs.drawImage(this,0,0);
}
imageObj.src = imgSrc;
}
}
render();

16. 关于Zepto点透
zepto的tap是通过兼听绑定在document上的touch事件来完成tap事件的模拟的,同时tap事件是冒泡到document上触发的。

在点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发。

而在冒泡到document之前，用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计)，所以在执行完tap事件之后，弹出来的选择组件马上就隐藏了，此时click事件还在延迟的300ms之中。当300ms到来时，click到的其实不是完成而是隐藏之后的下方的元素。如果正下方的元素绑定的有click事件此时便会触发，如果没有绑定click事件的话就当没click，但是正下方的是input输入框(或者select选择框或者单选复选框)，点击会默认聚焦而弹出输入键盘，也就出现了上面的点透现象。

解决方案 :

//(1)引入fastclick.js，在页面中加入如下js代码
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );

//(2)有zepto或者jQuery的js里面加上
$(function() {
FastClick.attach(document.body);
});

//(3)当然require的话就这样：
var FastClick = require(‘fastclick‘);
FastClick.attach(document.body, options);

//(4)用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()
$("#cbFinish").on("touchend", function (event) {
//很多处理比如隐藏什么的
event.preventDefault();
});

//(5)延迟一定的时间(300ms+)来处理事件
$("#cbFinish").on("tap", function (event) {
setTimeout(function(){
//很多处理比如隐藏什么的
},320);
});
17.html5调用安卓或者ios的拨号功能
H5 提供了自动调用拨号的标签: 只要在 <a>标签的 href中添加 tel: 就可以实现。

<a href="tel:4008106999,1034">400-810-6999 转 1034 </a>

拨打手机直接如下:
<a href="tel:15677776767">点击拨打15677776767</a>
IOS中好像并未生效。

18. 禁止文本选中
Element {
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
}
禁止ios和android用户选中文字
-webkit-user-select:none

19. 关于Android和IOS
在ios和andriod中,audio元素和video元素无法自动播放
解决方案: 触屏即播

$(‘html‘).one(‘touchstart‘, function(){ audio.play()} )
fixed定位缺陷

IOS下, fixed元素容易定位出错: 软键盘弹出时,影响fixed元素的定位。

Android下 , fixed表现要比IOS更好。软键盘弹出时,不会影响fixed元素定位

IOS4 下不支持 : position : fixed

解决方案: 使用 iScroll插件

在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：
*{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
不过此方法在现在的Android浏览器下,只能去掉橙色的背景色,点击产生的高亮边框并没有去掉。

20. 关于Android
不让 Android 手机识别邮箱

android下取消输入语音按钮

input::-webkit-input-speech-button {display: none}

21. 关于IOS
禁止 iOS 识别长串数字为电话
<meta content="telephone=no" name="format-detection" />
禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none
iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格
使用正则去掉:

this.value = this.value.replace( /\u2006/g , ‘‘ );
ios下取消input在输入时默认的英文首字母大写
<input autocapitalize="off" autocorrect="off" />
iOS6下伪类:hover
除<a>标签之外的元素都无效；在Android下则有效。类似

div#topFloatBar_l:hover
#topFloatBar_menu { display:block; }
这样的导航显示在iOS6点击没有点击效果，只能通过增加点击侦听器给元素增减class来控制子元素。

22. IOS 和 Android 下触摸元素是出现半透明灰色遮罩
设置 alpha 值为0 即可去除半透明灰色遮罩。

注: transparent属性值在Android下无效。

Element {
-webkit-tap-highlight-color : rgba( 255,255,255, 0);
}
参考文档http://www.jb51.net/post/phone_web_ysk

23. 去掉 iPhone 和 iPad 下输入框默认内阴影
Element{
-webkit-appearance: none;
}
24. active兼容处理即伪类 :active 失效
方法一：body添加ontouchstart
<body ontouchstart="">
方法二：js给 document 绑定 touchstart 或 touchend 事件
<style>
a {
color:#000;
}
a:active {
color:#fff;
}
</style>
<a herf=foo >bar</a>
<script>
document.addEventListener(‘touchstart‘,function(){},false);
</script>
25. 动画定义3D启用硬件加速
Element {
-webkit-transform:translate3d(0,0,0)
transform: translate3d(0,0,0);
}
注意：3D变形会消耗更多的内存与功耗
26. Retina屏的1px边框
Element{
border-width:thin;
}
27. webkit mask 兼容处理
某些低端手机不支持css3 mask，可以选择性的降级处理。
比如可以使用js判断来引用不同class：
if(‘WebkitMask‘indocument.documentElement.style){
alert(‘支持mask‘);
}else{
alert(‘不支持mask‘);
}
28. 圆角bug
某些Android手机圆角失效
解决方案：background-clip: padding-box;
29. 顶部状态栏背景色
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
说明：除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。
如果content设置为default，则状态栏正常显示。
如果设置为blank，则状态栏会有一个黑色的背景。
如果设置为blank-translucent，则状态栏显示为黑色半透明。
如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。
如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。
默认值是default。
30. 设置缓存
<meta http-equiv="Cache-Control"content="no-cache"/>
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。
如果不希望使用缓存可以设置no-cache。
31. 桌面图标
<link rel="apple-touch-icon"href="touch-icon-iphone.png"/>
<link rel="apple-touch-icon"sizes="76x76"href="touch-icon-ipad.png"/>
<link rel="apple-touch-icon"sizes="120x120"href="touch-icon-iphone-retina.png"/>
<link rel="apple-touch-icon"sizes="152x152"href="touch-icon-ipad-retina.png"/>
iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。
上面的写法可能大家会觉得会有默认光泽，下面这种设置方法可以去掉光泽效果，还原设计图的效果！
<link rel="apple-touch-icon-precomposed"href="touch-icon-iphone.png"/>
图片尺寸可以设定为5757（px）或者Retina可以定为114114（px），ipad尺寸为72*72（px)
32. 启动画面
<link rel="apple-touch-startup-image"href="start.png"/>
iOS下页面启动加载时显示的画面图片，避免加载时的白屏。
可以通过madia来指定不同的大小：

<link href="apple-touch-startup-image-320x460.png"media="(device-width: 320px)" rel="apple-touch-startup-image"/>

<link href="apple-touch-startup-image-640x920.png"media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>

<link rel="apple-touch-startup-image"media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">

<link href="apple-touch-startup-image-768x1004.png"media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"/>

<link href="apple-touch-startup-image-748x1024.png"media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"/>

<link href="apple-touch-startup-image-1536x2008.png"media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>

<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image"/>
33. 浏览器私有及其它meta
以下属性在项目中没有应用过，可以写一个demo测试以下！
//QQ浏览器私有
全屏模式
<meta name="x5-fullscreen"content="true">
强制竖屏
<meta name="x5-orientation"content="portrait">
强制横屏
<meta name="x5-orientation"content="landscape">
应用模式
<meta name="x5-page-mode"content="app">
//UC浏览器私有
全屏模式
<meta name="full-screen"content="yes">
强制竖屏
<meta name="screen-orientation"content="portrait">
强制横屏
<meta name="screen-orientation"content="landscape">
应用模式
<meta name="browsermode"content="application">
//其它
针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name="HandheldFriendly" content="true">
微软的老式浏览器
<meta name="MobileOptimized" content="320">
windows phone 点击无高光
<meta name="msapplication-tap-highlight" content="no">
34. IOS中input键盘事件keyup、keydown、keypress支持不是很好
问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！
解决办法：
可以用html5的oninput事件去代替keyup
<input type="text"id="testInput">
<script type="text/javascript">
document.getElementById(‘testInput‘).addEventListener(‘input‘,function(e){
varvalue = e.target.value;
});
</script>
然后就达到类似keyup的效果！
35. H5网站input 设置为type=number的问题
H5网页input 的type设置为number一般会产生3个问题:
1. maxlength属性不好用了。
2. form提交的时候，默认给取整了。因为form提交默认做了表单验证，step默认是1。
3. 部分安卓手机出现样式问题。

问题1的解决方案 :

<input type="number" oninput="checkTextLength(this ,10)">

functioncheckTextLength(obj, length) {
if( obj.value.length > length) {
obj.value = obj.value.substr(0, length);
}
}
问题2的解决方案: 设置step属性

<input type="number" step="0.01" />

假如step和min一起使用，那么数值必须在min和max之间。
问题3的解决方案: 去除input的默认样式

input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance:none;
margin:0;
}
36. IOS设置 input按钮样式会被默认样式覆盖
解决方案: 设置默认样式为 none

input,textarea {
border: 0;
-webkit-appearance: none;
}
37. select下拉选择设置右对齐
select option {
direction: rtl;
}
38. 通过transform进行skew变形, rotate旋转会产生锯齿现象
解决方案:

-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
transform: rotate(-4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0);
39. 关于IOS 和 OSX 端字体的优化(横竖屏会出现字体加粗不一致的现象)
iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，
但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。

-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
40. 移动端H5的 audio的autoplay属性失效问题
这个不是 BUG。

由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。

解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。

document.addEventListener(‘touchstart‘,function() {
document.getElementsByTagName(‘audio‘)[0].play();
document.getElementsByTagName(‘audio‘)[0].pause();
});
41. 移动端 H5的 input data不支持placeholder的问题
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type=‘date‘)" id="date">
42. type为search的input,部分机型会自带close按钮样式
有些机型的搜索input控件会自带close按钮（一个伪元素）。

而通常为了兼容所有浏览器，通常会自己实现一个，此时去掉原生close按钮的方法为:

Search::-webkit-search-cancel-button{
display:none;
}
如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。

43. select的option展开
zepto方式:

$(sltElement).trigger("mousedown");
原生js方式:

functionshowDropdown(sltElement) {
var event;
event = document.createEvent(‘MouseEvents‘);
event.initMouseEvent(‘mousedown‘,true,true, window);
sltElement.dispatchEvent(event);
};

同样的代码，有的浏览器效果显示“正常”，有的显示“不正常”。

什么是兼容问题，那么：

不正常的原因是什么？（不支持标签属性 or 存在bug ）
该如何让其显示正常？

为什么浏览器会存在兼容问题？

同一浏览器，版本越老，存在bug越多，相对于版本越新的浏览器，对新属性和标签、新特性支持越少。
不同浏览器，核心技术不同，标准不同，实现方式也有差异，最终呈现出来在大众面前的效果也是会有差异。

处理兼容问题的思路：

1、要不要做？

产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）。
成本的角度 (有无必要做某件事)。
2、做到什么程度？

让哪些浏览器支持哪些效果。
3、如何做？

根据兼容需求选择技术框架/库(如jquery 1.x.x)。
根据兼容需求选择兼容工具：html5shiv、Respond.js、CSS Reset、normalize.css、Modernizr.js、 postcss。
条件注释、CSS Hack、js 能力检测做一些修补。

渐进增强和优雅降级

渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级`(graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

具体方法：

1. IE条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。

条件注释可被用来向IE提供及隐藏代码。

注意：只有 IE9以下的浏览器才能识别这种语法，其他浏览器仅仅认为是普通注释。

<script>alert("在 IE 下条件语法生效，但script不执行。在非 IE 下上下两句都被当做注释所以当前 script 会执行");</script>

使用了条件注释的页面在ie9 及以前中可正常工作，但在ie10 以后不再支持。

2. CSS hack是利用浏览器遗留 bug 的原理来识别旧的浏览器。

.box{
color: red;
_color: blue; /*只有ie6认识*/
*color: pink; /*只有ie67认识*/
color: yellow\9; /*ie浏览器都能识别*/
}

以下是一些常见属性的兼容情况

inline-block: >=ie8
min-width/min-height: >=ie7
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圆角: >= ie9
阴影: >= ie9
动画/渐变: >= ie10

一些兼容写法范例：

.clearfix:after{
content: ‘‘;
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效，zoom:1触发hasLayout,起到类似BFC的效果 */
}

.target{
display: inline-block;
*display: inline; /*仅对ie67生效*/
*zoom: 1; /*仅对ie67生效*/
}



<!DOCTYPE html>



<html class="no-js">

一些和兼容相关的工具/库：

html5shiv
Respond.js
CSS Reset
normalize.css
Modernizr.js
postcss
特别是Modernizr.js 和 postcss 很有实践价值，值得好好看看用法。

————————————————
版权声明：本文为CSDN博主「wei_jia007」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wei_jia007/article/details/82426197

Android、IOS浏览器的适配问题整理

相关推荐