调整窗口大小时缩放整个主体

Question

我想创建一个没有响应的网站,但如果窗口调整大小,一切都是向上/向下扩展,并保持相同的比例.如果单词在小屏幕中太小则无关紧要,首要任务是在调整大小时防止元素重叠

我尝试过使用:

<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

问题是,现在内容在调整大小时会重叠.

Answer 1

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