移动端基本环境

测试:chrome模拟的只是尺寸

<meta name="viewport" content="width=400,initial-scale=1,user-scalable=no,initial-scale=1">

    <!--
    这个表示的是视口设置[可视区窗口]
        - 默认不设置viewport,默认在移动端是980.
        - width=device-width
            - width表示可视区的宽度,参数有 number||device-width
        - user-scalable
            - 是否允许用户缩放,yes||no
            - IOS10无效
        - initial-scale
            - 初始.[实际上放缩的是THML的宽.浏览器讨巧]
            - 初始比例要和最小缩放比例保持一致[用户会放大的情况比较多]
        - minimum-scale
            - 最小缩放比例
        - maximum-scale
            - 最大缩放比例[ios10已经无效]
    -->

<!--达到自适应的状态-->
    <meta name="viewport" content="width=device-width,user-scalable=no">

这个输出的是像素比[像素比:把一个像素放大到window.devicePixelRatio个像素去显示]
  alert(window.devicePixelRatio);`

移动端常见的一些问题

    <!--
    强制X5内核浏览器的显示模式 [QQ浏览器 微信 QQweb]
    landscape||portrait
        - landscape 强制横屏
        - portait 强制竖屏
    -->
    <meta name="x5-orientation" content="portait" />


    <!--
    X5内核强制全屏显示
    -->
    <meta name="x5-fullscreen" content="true" />


    <!--
    强制UC浏览器横屏显示
    -->
    <meta name="screen-orientation" content="portrait">

    <!--
    强制UC浏览器全屏显示
    -->
    <meta name="full-screen" content="yes">

    <!-- 以上的功能只有这两个浏览器支持-->

    <meta name="format-detection" content="telephone=no, email=no" />
<!--
    在手机浏览器中会自动识别电话号码和emall,禁止识别
    -->

// 被禁止之后拨打电话&&发送邮件

<!--
拨打电话
-->
<a href="tel:13822">请拨打13822222222</a>

/*消除点击之后的阴影问题*/
        a,
        input,
        button{
            -webkit-tap-highlight-color: rgba(255,2,222,1);
        }

由于测试环境限制,暂停