移动端兼容问题和解决方案

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 24 天，点击查看活动详情

禁止 ISO 识别长串数字识别为电话

解决方法：

<meta content="telephone=no" name="format-detection" />

禁止 IOS 弹出各种操作窗口

解决方法：

-webkit-touch-callout:none

禁止 Android 手机识别邮箱

解决方法：

  <meta content="email=no" name="format-detection"/>

禁止 IOS 和Android用户选中文字

解决方法：

-webkit-user-selection:none

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

解决方法：

  <input autocapitalize="off" autocorrect="off" />

Android 下取消输入语音按钮

解决方法：

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

在移动端修改难看的点击的高亮效果 ios 和 android 都可以

解决方法：

  * {
      -webkit-tap-highlight-color: rega(0, 0, 0, 0);
    }

ios 下 input 为 type=button 属性disabled为true时会出现样式文字和背景异常问题

解决方法：

{
      opacity: 1;
}

input 为fixed 定位在ios下input固定定位在顶部或者底部在页面滚动一些就离后点击input弹出键盘位置出现在中间位置

解决方法：内容列表框也使用fiexd定位，这样就不会出现错误问题

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

解决方法：可以使用整体方法1倍（font-size,width,height）再使用transform缩放

移动端图片上传兼容低端机

解决方法： input 加入属性 accept="image/*" multiple

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

解决方法：input 有placeholder的情况下不要设置行高

overflow : scroll 或者 autu;在 IOS 上滑动卡顿的问题

解决方法： 加入 -webkit-overflow-scrolling:touch

IOS 中日期如：2022-02-22 00:00:00格式的事件转为时间戳不成功

解决方法：需要将时间中的 ‘00:00:00’去除后才能转换成功

ios 将时间格式改为 /分格

解决方法：使用正则替换

移动端 click 300ms 延迟响应

 使用 FastClick
window.addEventListener('load',function(){
  FastClick.attach(document.body);
},false)

移动端1px边框问题

解决方法：原先元素的border去掉然后利用：before或者：after重做border,并transform的scale缩小一半原先的元素相对定位，新做的border绝对定位

    .xxx {
      position: relative;
      border: none;
    }

    .xxx::after {
      content: "";
      position: absolute;
      bottom: 0;
      background: #000;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }