"The ancients' knowledge is weak, but their Kung Fu can only be achieved when they are young and old."

**The mobile terminal is compatible with the encyclopedia and specializes in treating all kinds of discomfort, * * have you ever been distressed by various incompatibilities of the browser, especially the psoriasis of IE? This article may help you. It is not easy to code words often, and it is more difficult to produce high-quality products. If you are not particularly lucky, please make special efforts first, don't fail because of laziness, and hypocritically attribute the reason to your own bad luck. You have to work very hard to appear effortless. If this article can bring you some help, I hope to give little brother flying rabbit one key three times to express support. Thank you, little friends.

catalogue

1, Prohibit copying and selecting text

2, Solve the problem of sliding and jamming on the page under IOS

3, Do not click to enlarge the picture

4, When the input tag type is number, the up and down arrows appear on the pc side

5, Clear the default style of input label under IOS (fillet, shadow)

6, Cancel the default capitalization of default English initials under IOS

7, Solve the compatibility of date format under IOS

8, The font is adaptive to the screen size

9, meta compatible synthesis

10, Remove margin for all browsers

11, Unify the row height of all browsers

12, Font adaptation when IOS direction changes

1, Prohibit copying and selecting text

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

2, Solve the problem of sliding and jamming on the page under IOS

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

3, Do not click to enlarge the picture

img {
    pointer-events: none;
}

4, When the input tag type is number, the up and down arrows appear on the pc side

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

5, Fillet style (under IOS default)

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

6, Cancel the default capitalization of default English initials under IOS

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

7, Solve the compatibility of date format under IOS

var value = '2021-03-17 22:30'; //ios does not support this format. It only supports 2021 / 03 / 17 22:30
value = value.replace(/-/g, "/");

8, The font is adaptive to the screen size

(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);

9, meta compatible synthesis

    <!--for baidu Identify the mobile page and prohibit Baidu transcoding-->
    <meta name="applicable-device" content="mobile">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!--viewport If the actual situation of the page does not allow zooming, please add,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">
    <!-- Delete the default Apple toolbar and menu bar -->
    <!-- <meta name="apple-touch-fullscreen" content="yes" /> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- avoid IE Use compatibility mode -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- Enable 360 browser speed mode(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- Optimized for handheld devices, mainly for some old unrecognized devices viewport Browser, such as BlackBerry -->
    <meta name="HandheldFriendly" content="true">
    <!-- Microsoft's old browser -->
    <meta name="MobileOptimized" content="320">
    <!-- UC Force full screen -->
    <meta name="full-screen" content="yes">
    <!-- QQ Force full screen -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC Application mode -->
    <meta name="browsermode" content="application">
    <!-- QQ Application mode -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone Click No highlight -->
    <meta name="msapplication-tap-highlight" content="no">

10, Remove margin for all browsers

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

11, Unify the row height of all browsers

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

12, Font adaptation when IOS direction changes

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