移动端常见问题一

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,user-scalable=no" />
        <!--x5内核浏览器 (qq)   强制竖屏显示-->
        <meta name="x5-orientation" content="portrait" />
        <!--x5内核浏览器 (qq)   全屏显示-->
        <meta name="x5-fullscreen" content="true" />
        <!--禁止电话号码识别和邮箱识别-->
        <!--<meta name="format-detection" content="telephone=no,email=no" />-->
        <title></title>
        <style>
            #box{
                width: 100px;
                height: 100px;
                background: red;
                
            }
            /*设置字体*/
            body{
                /*默认字体设置*/
                font-family: helvetica;
            }
            
            body *{
                /*禁止字体缩放*/
                -webkit-text-size-adjust: 100%;
            }
            a,
            input,
            button{
                /*清除点击阴影*/                /*全透明色*/
                -webkit-tap-highlight-color:rgba(0,0,0,0);
            }
            
            input,
            button{
                /*清除圆角*/
                -webkit-appearance: none;
                border-radius:0;
            }
            
            /*Foot Boosting 在一段文字我们没有给他设置高度的时候,在webkit内核下,文字的大小被浏览器放大了
                  解决办法:
                  1.设置高度
                  2.设置最大高度   max-height*/ 
        </style>
        <script>
//            alert(window.devicePixelRatio);
            //n=window.devicePixelRatio;
            //把一个像素放大至n个像素去显示
            //设计图最少750
        </script>
    </head>
    <body>
        这是我的第一个移动端页面
        <div id="box"></div>
        <p>442564584</p>
        <!--拨打电话-->
        <a href="tel:110">请拨打电话：</a>
        <!--发送邮件-->
        <a href="mailto:[email protected]">请发送邮件</a>
        <br />
        <!--a连接，按钮，移动端点击的时候有灰色背景-->
        <a href="http://www.baidu.com">百度</a>
        <!--真机上按钮会变成圆角-->
        <input type="button" value="按钮" />
    </body>
</html>
移动端常见问题一

猜你喜欢
