移动端常见兼容问题

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

android

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

ios

// 苹果设备禁止缩放
window.onload = function () {
  document.addEventListener("touchstart", function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  });
  document.addEventListener("gesturestart", function (event) {
    event.preventDefault();
  });
};

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

body{
-webkit-overflow-scrolling: touch;
    overflow-scrolling:touch
}

Android3和IOS5+支持CSS3的新属性为overflow-scrolling

3.长时间按住页面出现闪退

element{
   -webkit-touch-callout: none;
}

4. 禁用iPhone中Safari的字号自动调整 

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

5.去除iPhone中默认的input样式 

input[type="submit"], input[type="reset"], input[type="button"]{ -webkit-appearance:none; resize: none; }

6. 取消链接高亮  

body,div,ul,li,ol,h1,h2,h3,h4,h5,h6,input,textarea,select,p,dl,dt,dd,a,img,button,form,table,th,tr,td,tbody,article,aside, details,figcaption,figure,footer,header,hgroup, menu,nav,section{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); }

7.设置HTML5元素为块 

article, aside, details,figcaption,figure,footer,header,hgroup, menu,nav,section { display: block; }

8.图片自适应 

img { vertical-align: middle; max-width: 100%; height: auto; border:none; }

9.强制隐藏横向滚动条

body{
    overflow-x: hidden; 
}

10.移动端特殊样式

/*CSS3盒子模型*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
    /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
    -webkit-appearance: none;
    /*禁用长按页面时的弹出菜单*/
    img,a { -webkit-touch-callout: none; }

11.iphone及ipad下输入框默认内阴影

element{
    -webkit-appearance: none;
}

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

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

设置透明度为0可以去除透明灰色遮罩，transparent属性值在android下没有效果

13.圆角bug：某些android手机的圆角失效

 background-clip: padding-box;

14.解决300ms延迟问题

不适用click事件 使用自定义fastClick事件

window.addEventListener( “load”, function { FastClick.attach( document.body ); }, false );

15.rem单位适配

使用cssrem插件自动转换

但要设置

我们要在750px的屏幕使用rem单位等比例还原设计稿的时，也要使用等比例切割，把页面划分为10等分  即给html设置font-size值为：75px；

那就是  1份=750px/10份=75px

则     1rem/75px=75px/75px---》1rem=75px

        1px=1rem/75px=0.0133rem

操作步骤：

安装cssrem---》设置---》----设置---》搜索cssrem----》找到Root Font Size---》设置为750/10----》重启vscode

16.禁止iOS弹出各种操作窗口

-webkit-touch-callout:none

17.禁止iOS和Android用户选中文字

-webkit-user-select:none

18.Android下取消输入语音按钮

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

19.iOS下input为type=button属性disabled设置true，会出现样式文字和背景异常问题

使用opacity=1;

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

内容列表框也是fixed定位，这样不会出现fixed错位的问题

21.在Android上placeholder文字设置行高会偏上

input有placeholder情况下不要设置行高

22.iOS中日期如：2022-02-22 00:00:00格式的时间转时间戳不成功

需要将时间中的’00:00:00去除之后才能转为时间戳’

23.iOS中需要将时间格式转为/，如：2022/02/22

let date = ‘2022-02-22’; let dateStr = date.replace(/-/g, ‘/’); // 2022/02/22

24.图片3像素

去除图片下间隙的办法有很多，常用的有3种

（1）设置父盒子字号为0　　
 .box{ font-size: 0; } 

（2）改变图片的display　　
 .box img{ display: block; } 

（3）给图片设置垂直对齐方式 
.box img{ virtical-align: middle;//设置为任意值都可以 除了baseline }