html – 调整窗口大小时缩放整个身体

发布时间：2020-12-14 21:34:18 所属栏目：资源来源：网络整理

导读：我想创建一个没有响应的网站，但是如果窗口大小调整，那么一切都会按比例放大/缩小，并保持相同的比例。在小屏幕中这些单词太小无关紧要，首先要防止在调整大小时元素重叠我试过使用： meta id="meta" name="viewport" content="width=device-width; initia

我想创建一个没有响应的网站，但是如果窗口大小调整，那么一切都会按比例放大/缩小，并保持相同的比例。在小屏幕中这些单词太小无关紧要，首先要防止在调整大小时元素重叠

我试过使用：

<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

和

<script type="text/javascript">
  $(document).ready(function () {

    $(window).resize(function () {
      calculateNewScale();
    });

    calculateNewScale(); // if the user go to the page and his window is less than 1920px

    function calculateNewScale() {
      var percentageOn1 = $(window).width() / 1920);
      $("body").css({
        "-moz-transform": "scale(" + percentageOn1 + ")","-webkit-transform": "scale(" + percentageOn1 + ")","transform": "scale(" + percentageOn1 + ")"
      });
    }
  });

还有CSS

body {
width:100vw;
height:100vh;
}

网站在这里：

kotechweb.com/new_focus/page/about_us

问题是，现在内容在重新调整大小时是重叠的。

解决方法

视图端口：< meta name =“viewport”content =“width = device-width，initial-scale = 1”>。这将使浏览器在自己的屏幕的宽度上呈现页面的宽度。
本文提供了有关视口元标记的更多信息：
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!