Summary of compatible operations on web and mobile terminals

##Main 4 References for WEB Compatible Mobile Phone Screens and Input Devices

###HTTP: Matching the UserAgent field User Agent is called User Agent in Chinese, or UA for short, which is a special string header that enables the server to identify the operating system and version, CPU type, browser and version, and browser rendering used by the client. Engines, browser languages, browser plugins, etc.

The most mainstream method is to query this field on the server/client:

//检测是否是移动端
        function checkMobile() {
            if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                alert("请在移动端查看（或者开发者模式）");
            }
        }

###JS: Determine the available workspace height/width of window and screen screens: window.screen.availHeight/window.screen.availWidth

Height/width of screen resolution: +window.screen.height/window.screen.width

Web page visible area width/height: +document.body.clientWidth/document.body.clientHeight

I like a violent way:

    ///嘿嘿嘿
    let device = window.innerWidth < window.innerHeight ? "phone" : "laptop";

###CSS: @Media query determines the mobile phone by querying the screen width, which is limited to CSS styles; the feature is that the media query is dynamically updated, which is very convenient, and not only adapts to the screen size, but also dynamically compatible with the change of window size:

@CHARSET "UTF-8";
@media (max-width: 991px) {
    /*do something*/
}
@media (min-width: 1601px) {
    /*do something*/
}

###HTML: It is also very useful to add a zoom tag. Usually the ppi/dpi of the mobile phone screen is very high, so the normal font will appear small, so it is best to add the following viewport tag in the html header:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width Sets the width of the layout viewport, a positive integer, or the string "width-device" initial-scale Sets the initial zoom value of the page, as a number, with decimals minimum-scale allows the user's minimum zoom value, as a number , you can take a decimal maximum-scale allows the user's maximum zoom value, as a number, you can take a decimal height to set the height of the layout viewport, this property is not important to us, rarely use user-scalable Whether to allow the user to zoom, the value is "no" or "yes", no means not allowed, yes means allowed

Summary of compatible operations on web and mobile terminals

Guess you like