移动端常见的兼容性问题总结

前端YYDS
1,032 阅读3分钟
  1. 安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。

想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100 * 100，背景图必须得200*200，然后background-size:contain;，这样显示出来的图片就比较清晰了。\

  1. 防止手机中网页放大和缩小。 这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport
    设置了DTD的方式是XHTML的写法，假如我们页面运用的是html5，可以不用设置DTD,直接声明。 使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。 但是为了更好的兼容，我们会使用完整的viewport设置。 代码如下:
    当然，user-scalable=0,有的人也写成user-scalable=no，都可以的。

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

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

设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。

  1. ctive兼容处理 即 伪类 :active 失效 方法一：body添加ontouchstart
    方法二：js给 document 绑定 touchstart 或 touchend 事件
a {
color:#000;
}
a:active {
color:#fff;
}
[bar]()
document.addEventListener('touchstart',function(){},false);
  1. 手机上的多行省略
.overflow-hidden{

display: box !important;

display: -webkit-box !important;

overflow: hidden;

text-overflow: ellipsis;

-webkit-box-orient: vertical;

-webkit-line-clamp: 4;/*第几行出现省略号*/

/*text-align:justify;不能和溢出隐藏的代码一起写，会有bug*/

}

  1. 某些安卓手机的自带浏览器不识别onkeydown onkeypress onkeyup事件，这些事件会导致不能输入汉字

  2. IOS手机中如果出现一个元素的层级非常高可还是被别的元素遮盖的，那么就将该元素与别的元素同级苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;

  3. button /button元素一定要写上type属性不然会默认提交表单，出现想不到的bug

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

    html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。如下：400-810-6999 转 1034拨打手机直接如下:点击拨打15677776767

  5. 上下拉动滚动条时卡顿、慢

body {-webkit-overflow-scrolling:

touch;overflow-scrolling: touch;}

Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
  1. 禁止复制、选中文本
Element {-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
}
解决移动设备可选中页面文本(视产品需要而定)
  1. iphone及ipad下输入框默认内阴影
Element{

-webkit-appearance:none;

}
avatar
文章
阅读
粉丝