温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

移动端页面宽度自适应

发布时间:2020-07-09 09:49:56 来源:网络 阅读:1033 作者:chenhuixfyy 栏目:移动开发
<!-- 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问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI