移動端頁面寬度自適應(yīng)

發(fā)布時間：2020-07-09 09:49:56 來源：網(wǎng)絡(luò) 閱讀：1038 作者：chenhuixfyy 欄目：移動開發(fā)

<!-- 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;}

向AI問一下細(xì)節(jié)

移動端頁面寬度自適應(yīng)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽