美文网首页
页面适配

页面适配

作者: xiaomeimei | 来源:发表于2016-07-15 08:51 被阅读0次

    页面适配

        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta http-equiv="imagetoolbar" content="no">
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
        <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, minimum-scale=1">
        <!--禁止IOS识别号码 -->
        <meta content="email=no" name="format-detection"/>
        <!--  页面适配 -->
        <script type="text/javascript">
           (function(){
            var resizeEvent =  'orientationchange' in window ? 'orientationchang' :'resize';
            var rescale = function(){
                 var deviceWidth = document.documentElement.clientWidth;
                  if(deviceWidth > 640) deviceWidth = 640;
                  document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
                    //640的屏幕宽度   100为字体大小   rem 也就是1rem=100px;   代码中若遇到px计算成rem  直接除以100
            }
            window.addEventListener(resizeEvent,rescale,false);
            document.addEventListener('DOMContentLoaded',rescale,false);
           })();
        </script>
    

    body的width为640 / 100 = 6.4rem
    html font-size可能需要额外的媒介查询,并且font-size不能使用rem,如网易的设置:

      html
      @media screen and (max-width:321px){ .m-navlist{font-size:15px}}
    @media screen and (min-width:321px) and (max-width:400px){ .m-navlist{font-size:16px}}
    @media screen and (min-width:400px){ .m-navlist{font-size:18px}}
    

    若用px: 则添加代码:

    <meta content="width=device-width,width=640,user-scalable=no" name="viewport" >

    相关文章

      网友评论

          本文标题:页面适配

          本文链接:https://www.haomeiwen.com/subject/nursjttx.html