常见的移动端兼容问题以及解决方案

常见的移动端兼容问题以及解决方案

1. 禁止ios识别长串数字为电话

解决方法：添加 meta 属性

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

2. 禁止 ios 弹出各种窗口

解决方法：添加全局 CSS 样式

-webkit-touch-callout:none;

3. 禁止 Android 手机识别邮箱

解决方法：添加 meta 属性

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

4. 禁止 ios 和 Android 用户选中文字

解决方法：添加全局 CSS 样式

-webkit-user-select: none;

5. ios 环境下，取消 input 输入框在输入时英文首字母默认大写

解决方法：给 input 标签加上相应属性

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

6. Android 环境下取消语音输入按钮

解决方法：input 框添加样式

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

7. 修改移动端的点击高亮效果（ios，Android均有效果）

-webkit-tap-highlight-color: rgba(0,0,0,0);

8. ios 环境下 input 按钮设置 disabled属性为 true 时显示异常

input[type=button]{
    opacity: 1;
}

9. 移动端字体小于 12px 时的异常显示

解决方法：可以先使用整体放大1倍（width、height、font-size等等），再使用 transform 进行缩小

10. 在移动端图片上传图片兼容低端机的问题

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

11. 在 Android 环境下 placeholder 文字设置行高时会偏上

解决方法：input 有 placeholder 属性时不要设置行高

12. 当设置样式 overflow:scroll 或 auto时，在 IOS 上滑动会出现卡顿

-webkit-overflow-scrolling: touch;

13. 移动端 click 事件存在延迟的问题

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

14. 移动端1px边框问题

.box{
    position: relative;
    border: none;
}
.box:after{
    content: '';
    position: absolute;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
    transform-origin: 0 0;
}

这里是万物之恋，我们下次再见了！