移动端兼容宝典大全，专治各种不适

Posted 2021-06-01 autofelix

〝 古人学问遗无力，少壮功夫老始成 〞

移动端兼容宝典大全，专治各种不适，你是否也曾为浏览器各种的不兼容而苦恼，尤其是IE这个牛皮癣，这篇文章可能会给你帮助哦，常码字不易，出精品更难，没有特别幸运，那么请先特别努力，别因为懒惰而失败，还矫情地将原因归于自己倒霉。你必须特别努力，才能显得毫不费力。如果这篇文章能给你带来一点帮助，希望给飞兔小哥哥一键三连，表示支持，谢谢各位小伙伴们。

目录

一、禁止复制、选中文本

二、解决在IOS下页面滑动卡顿

三、禁止图片点击放大

四、解决input标签type为number时，pc端出现上下箭头

五、清除IOS下input标签默认样式(圆角、阴影)

六、取消IOS下默认英文首字母的默认大写

七、解决IOS下日期格式兼容

八、字体随屏幕大小自适应

九、meta的兼容综合

十、移除所有浏览器的margin

十一、统一所有浏览器的行高

十二、IOS方向改变时字体的自适应

---

一、禁止复制、选中文本

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

二、解决在ios下页面滑动卡顿

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

三、禁止图片点击放大

img {
    pointer-events: none;
}

四、解决input标签type为number时，pc端出现上下箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

五、清除IOS下input标签默认样式(圆角、阴影)

input {
        -webkit-appearance: none;
        border-radius: 0;
        border: 1px #ccc solid;
    }

六、取消IOS下默认英文首字母的默认大写

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

七、解决IOS下日期格式兼容

var value = '2021-03-17 22:30'; //ios不支持这种格式,只支持2021/03/17 22:30
value = value.replace(/\\-/g, "/");

八、字体随屏幕大小自适应

(function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 750) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

九、meta的兼容综合

    <!--for baidu 识别移动端页面并禁止百度转码-->
    <meta name="applicable-device" content="mobile">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!--viewport 设置，如果页面实际情况不允许缩放请加上,user-scalable=no-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta http-equiv="x-rim-auto-match" content="none">
    <meta name="format-detection" content="address=no">
    <!-- 删除默认的苹果工具栏和菜单栏 -->
    <!-- <meta name="apple-touch-fullscreen" content="yes" /> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">

十、移除所有浏览器的margin

html, body, iframe, canvas, form, blockquote, fieldset, code, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, table, thead, tbody, td, tr section, menu, nav, header, footer, aside, article, figure, figcaption, hgroup, legend, summary, details, command, progress, dialog {
    margin: 0;
    padding: 0;
}

十一、统一所有浏览器的行高

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

十二、IOS方向改变时字体的自适应

html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}