移動APPmeta、Reset、適配、兼容處理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="apple-mobile-web-app-capable" content="yes"><!--刪除默認的蘋果工具欄和菜單欄-->
        <meta name="screen-orientation" content="portrait"><!--qq設置全屏-->
        <meta name="full-screen" content="yes"><!--uc全屏  安卓和 蘋果原生瀏覽器沒法強制豎屏和全屏,需js支持  !m=no-->
        <meta name="x5-orientation" content="portrait"><!--x5內核qq,微信 強制橫屏或豎屏顯示-->
        <meta http-equiv="Cache-Control" content="no-siteapp"><!--控制網頁的緩存每次都會訪問服務器-->
        <meta name="x5-fullscreen" content="true"><!--qq設置全屏  !m=false-->
        <meta name="format-detection" content="telephone=no, email=no" /><!--禁止識別電話號碼和郵箱號碼-->
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>移動端meta標籤和默認樣式設置</title>
        <!--<script>
        //注意:所適配的設備寬度不能超過目標寬度也就是設計稿寬度哦
            (function(){
                    var w=window.screen.width;  //獲取屏幕寬度
                    var targetW=720; //設置每一個頁面的縮放比
                    var scale=w/targetW;
                    //動態添加meta標籤
                    var meta=document.createElement("meta");
                    meta.name="viewport";
                    meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no"
                    //console.log(scale)
                    document.head.appendChild(meta);
            })()
        <script>-->
        <!--<script>
            window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {
                function resize() {
                            
                }
                resize();
                return resize;
        })(), false);
        </script>-->
        <script>
            /*
             touch事件的時候,手機自己是會有滾動的功能的你用到touch事件,就會觸發手機上面的默認事件,頁面就會出問題,因此阻止掉瀏覽器默認事件,
             */
            document.addEventListener('touchstart',function(ev){
                ev.preventDefault();//阻止瀏覽器的默認行爲
            })
        </script>
        <script>
            var pixelRatio = 1/window.devicePixelRatio;
            document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixelRatio+',minimum-scale='+pixelRatio+',maximum-scale='+pixelRatio+',user-scalable=no" />');
            var  html = document.getElementsByTagName('html')[0];
            var pageWidth=html.getBoundingClientRect().width;
            html.style.fontSize=pageWidth/16+'px';
            
            
        </script>
        <style>
            body, h1, h2, h3, h4, h5, h6, p, dl, dd { margin: 0; }
            ul, ol { margin: 0; padding: 0; list-style: none; }
            img { border: none; vertical-align: top; }
            a { text-decoration: none; }
            
            
            body {
                font-family: helvetica;/*英文字體*/
            }
            body * {
                -webkit-text-size-adjust: 100%;/*禁止用戶修改字體大小,部分橫豎屏切換字體大小縮放*/
                -webkit-user-select: none;/*禁止選中文字,安卓部分機型沒效果,彈出菜單js*/
            }
            a,
            input,
            button {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);/*清除點擊陰影*/
            }
            input,
            button {
                -webkit-appearance: none;/*清除ios按鈕圓角*/
                border-radius: 0;
            }html

    html{ios

    width:100%;web

    height:100%;瀏覽器

    overflow:hidden;緩存

  }服務器

         body{微信

    width:100%;app

    height:100%;工具

    overflow:auto;字體

  }

============

<!--ios下 bodyovflow:auto失效 200%仍是會出現橫向滾動條,解決辦法再包一層div 相對了增長的div進行定位-->        html{            height: 100%;            overflow: hidden;/*去掉頁面默認滾動條*/                                }        body{            margin: 0;            height: 動態計算的;            overflow: hidden;            position: relative;        }        .wrap{            height: 100%;            overflow: auto; /*此時頁面的滾動條是body的*/        }        </style>    </head>    <body>        <script>            var h= document.documentElement.clientHeight;            document.body.style.height=h+'px';        </script>        <a href="tel:18569032656">請撥打電話:18569032656</a>        <a href="mailto:yuanbo@yuanbo.com">請發送郵件:yuanbo@yuanbo.com</a>    </body></html>

相關文章
相關標籤/搜索