移动端的兼容问题汇总及解决方案

1、ios下input为type=button属性disabled设置true,会出现样式文字和背景异常问题。

解决方案:使用opacity=1来解决

对非可点击元素如(label,span)监听click事件，部分ios版本下不会触发。

解决方案:css增加cursor:pointer就搞定了

3、移动端1px边框

解决方案：比如按钮的box的class为btn

.btn:before{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #ccc;
  width: 200%;
  height: 200%;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
复制代码
复制代码

4、input为fixed定位，在ios下input固定定位在顶部或者底部，在页面滚动一些距离后，点击input(弹出键盘)，input位置会出现在中间位置。

解决方案:内容列表框也是fixed定位,这样不会出现fixed错位的问题

5、移动端字体小于12px使用四周边框或者背景色块，部分安卓文字偏上bug问题。

解决方案:可以使用整体放大1倍(width、height、font-size等等)再使用transform缩放,使用canvas在移动端会模糊也需要这样的解决方案

6、在移动端图片上传图片兼容低端机的问题。

解决方案:input 加入属性 accept="image/*" multiple

7、在h5嵌入app中，ios如果出现垂直滚动条时移动端的兼容问题汇总及解决方案，手指滑动页面滚动之后，滚动很快停下来，好像踩着刹车在开车，有“滚动很吃力”的感觉。

解决方案:

self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;对webview设置了更低的“减速率”
复制代码
复制代码

8、移动端click 300ms 延时响应

解决方案:使用 Fastclick

zepto的touch模块，tap事件也是为了解决click的延迟问题

触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题

window.addEventListener( "load", function() {
  FastClick.attach( document.body );
}, false );
复制代码
复制代码

这个300ms的延时会引发另外一个问题---点击穿透

点击穿透的原因:

1.浏览器有300ms的延时为了区别是double click还是缩放

2.移动端事件的响应顺序 touchstart -> touchmove -> touchend -> tap -> click

在300ms时间范围内,上层元素隐藏了或移开了,下层相同位置的元素触发了click事件(普通元素是click事件回调函数效果,input，select是focus事件,超链接是页面跳转)

解决方案是：

方案一:下层元素本身无click事件,没有input select a标签,统一使用touch事件

方案二：下层元素本身无click事件,在上方元素的touchend事件回调函数中,阻止后续触发默认事件 e.preventDefault();

1 $("#cbFinish").on("touchend", function (event) {
2     //很多处理比如隐藏什么的
3     event.preventDefault();
4 });
复制代码
复制代码

方案三：延迟一定的时间(300ms+)来处理事件

1 $("#cbFinish").on("tap", function (event) {
2     setTimeout(function(){
3     //很多处理比如隐藏什么的
4     },320);
5 });    
复制代码
复制代码

方案四：在上层显示以后加入对应的class名控制，截断显示层下方可获取焦点元素的事件获取

9、在安卓机上placeholder文字设置行高会偏上

解决方案:input有placeholder情况下不要设置行高

10、overflow:scroll，或者auto在iOS上滑动卡顿的问题

解决方案:加入-webkit-overflow-scrolling:touch

11、移动端适配可以使用lib-flexible，使用rem来布局移动端有一个问题就是px的小数点的问题，不同的手机对于小数点处理方式不一样，有些是四舍五入，有些直接舍去掉，因此在自动生成雪碧图时候图标四周适当留2px的空间，防止图标被裁剪掉12、iphonex的适配的解决方案

<meta name="viewport" content="...,viewport-fit=cover" />
body{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
复制代码
复制代码

13.不让 Android 手机识别邮箱

<meta content="email=no" name="format-detection" />
复制代码
复制代码

14.禁止 iOS 识别长串数字为电话

<meta content="telephone=no" name="format-detection" />
复制代码
复制代码

15.禁止 iOS 弹出默认的各种操作窗口， 在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。适用于链接元素比如新窗口打开，img元素比如保存图像等等

-webkit-touch-callout:none
复制代码
复制代码

16.消除 transition 闪屏

-webkit-transform-style: preserve-3d;     /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden;      /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/
复制代码
复制代码

17.iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格

// 可以通过正则去掉      
this.value = this.value.replace(/\u2006/g, '');
复制代码
复制代码

18.禁止ios和android用户选中文字

-webkit-user-select:none
复制代码
复制代码

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

应对方案：触屏即播

$('html').one('touchstart',function(){
    audio.play()
})
复制代码
复制代码

20.ios下取消input在输入的时候英文首字母的默认大写

autocapitalize="off" autocorrect="off" />
复制代码
复制代码

21.android下取消输入语音按钮

input::-webkit-input-speech-button {display: none}
复制代码
复制代码

22 CSS动画页面闪白,动画卡顿

解决方法:
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);
复制代码
复制代码

23.阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}
复制代码
复制代码

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

input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal

25 往返缓存问题

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

// 解决方法 ：
window.onunload = function(){};
复制代码
复制代码

26 在移动端修改难看的点击的高亮效果移动端的兼容问题汇总及解决方案，iOS和安卓下都有效：

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
复制代码
复制代码

不过这个方法在现在的安卓浏览器下，只能去掉那个橙色的背景色，点击产生的高亮边框还是没有去掉，有待解决！

有一个CSS3的属性，加上后，所关联的元素的事件监听都会失效，等于让元素变得“看得见移动端input事件失效，点不着”。IE到11才开始支持，其他浏览器的当前版本基本都支持。详细介绍见这里，可以解决点击难看的高亮效果。

pointer-events: none;
复制代码
复制代码

27. user-select:none;造成iPhone5上输入框的光标不显示，输入时如果不显示光标，那将无法看到输入位置。因此这个属性不能用在input元素上28.IOS手机，在react框架中，输入框输入内容添加去除空白逻辑移动端input事件失效，会造成中文拼音输入法，未及时选择中文，输入框出现许多拼音字母。还有maxLength属性，输入时不限制长度，输入结束才会自动截短。

     20} value={taskName}  onChange={(e) => this.setState({ taskName: e.target.value.replace(/\s*/g, '') })}  placeholder="请输入，20个字符以内" />
复制代码
复制代码

29.华为手机，输入文字弹出键盘，键盘收缩回去之后。页面的高度不会复原成真正的100vh,而仍停留在有键盘弹出时的高度，如果页面设置了全屏背景，就会出现页面有一部分没有背景。解决方法是监听window.onresize事件，手动恢复页面高度30.解决iphone下选中input页面自动放大的问题，viewport的user-scalable要设置成no

  <meta name="viewport"
    content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cove

。

标签： 移动端   兼容   问题   ios   iphonex

上一篇电脑如何恢复出厂设置 电脑恢复出厂设置方法【详解】

下一篇电脑卡顿弹窗？尝试多种方法仍然无效？这篇文章带你完美解决

热门文章

热门应用

留言评论