移動端頁面寬度自適應

<!-- js -->
    <script type="text/javascript">
      if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
        var version = parseFloat(RegExp.$1);
        if(version>2.3){
          var phoneScale = parseInt(window.screen.width)/640;
          document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
        }else{
          document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
        }
      }else{
        document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
      }
      //微信去掉下方刷新欄
      if(navigator.userAgent.indexOf('MicroMessenger') >= 0){
        document.addEventListener('WeixinJSBridgeReady', function() {
          //WeixinJSBridge.call('hideToolbar');
        });
      }
    </script>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <div id="wrapper">
      <section>
          <div class="bg"></div>
      </section>
  </div>
    
</body>
</html>
body,html{width: 100%;overflow: hidden;height: 100%;}
#wrapper { position: relative; height:auto; overflow: hidden; width:640px; margin:0 auto;display: none; }
section { position: relative;  width:640px;  height: 1008px; overflow: hidden;z-index: 1; }
section .bg { position: absolute; left:0; top: 0; width: 100%; height: 1008px;  background-size:auto 1008px;z-index: 1;}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章