ios和android 浏览器适配问题总结

1.防止手机中网页放大和缩小#

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

2.安卓浏览器看背景图片,有些设备会模糊?#

• 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？

  • 经过研究,发现是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。 想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。

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

    1
    background:url(../images/icon/all.png) no-repeat center center;
    2
    -webkit-background-size:50px 50px;
    3
    background-size: 50px 50px;
    4
    display:inline-block;
    5
    width:100%;
    6
    height:50px;

3.一些情况下对非可点击元素(如label/span)监听click事件，ios下不会触发#

• 解决方案:css增加cursor;

4.在ios和andriod中,audio元素和video元素无法自动播放#

• 这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
• 解决方法思路<先通过用户> touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)。

1
document.addEventListener('touchstart',function() {
2
    document.getElementsByTagName('audio')[0].play();
3
    document.getElementsByTagName('audio')[0].pause();
4
});

5.fixed定位缺陷#

• ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位, android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位 , ios4下不支持position;
• 解决方案<可用iscroll插件解决这个问题>

6.Input的placeholder会出现文本位置偏上的情况#

• PC端设置line-height等于height能够对齐，而移动端仍然是偏上
• 解决方案:设置line-height;

7.圆角bug#

• 某些Android手机圆角失效
• 解决方案

1
background-clip:padding-box;

8.IOS中input键盘事件keyup、keydown、keypress支持不是很好#

• 问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻响应keyup事件，只有在通过删除之后才能相应！
• 解决办法<可以用html5的oninput事件去代替keyup>,然后就达到类似keyup的效果！

1
<input type="text" id="testInput">
2
<script type="text/javascript">
3
document.getElementById('testInput').addEventListener('input',function(e){
4
    var value = e.target.value;
5
});
6
</script>

9.部分机型存在type为search的input,自带close按钮样式修改方法;#

• 有些机型的搜索input控件会自带close按钮(一个伪元素)，而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为:

1
#Search::-webkit-search-cancel-button{
2
    display:none;
3
}

• 如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。

10.手机浏览器独有的四个事件#

• onTouchmove,ontouchend,ontouchstart,ontouchcancel

11.为什么要用Zepto?#

• jquery适用于PC端桌面环境，桌面环境更加复杂，jquery需要考虑的因素非常多，尤其表现在兼容性上面，相对于PC端，移动端的发展都远不及PC端,手机上的带宽永远比不上pc端。pc端下载jquery到本地只需要1~3秒（90+K），但是移动端就慢了很多，2G网络下你会看到一大片空白网页在加载，相信用户第二次就没打开的欲望了。zepto解决了这个问题，只有不到10K的大小，2G网络环境下也毫无压力，表现不逊色于jquery。

IOS移动端click事件300ms的延迟响应#

• 详解地址https://gaodaxiu0406.github.io/2017/07/28/%E7%A7%BB%E5%8A%A8%E7%AB%AFclick300-380ms%E5%BB%B6%E8%BF%9F%E9%97%AE%E9%A2%98/,这是之前做的关于这个问题的详细讲解地址

点击穿透问题,input、select、a等元素可以被点击和focus#

• 这个在特定需求下才会有，因此如果没有类似问题的可以不看。首先需求是浮层操作，在手机上被遮罩的元素依然可以获取focus、click、change)，有两种解决方案：
  • 1.是通过层显示以后加入对应的class名控制，截断显示层下方可获取焦点元素的事件获取
  • 2.是通过将可获取焦点元素加入的disabled属性，也可以利用属性加dom锁定的方式（disabled的一种变换方式）