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

一、禁止复制、选中文本

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;
}