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

前端之家收集整理的这篇文章主要介绍了html – 调整窗口大小时缩放整个身体前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想创建一个没有响应的网站,但是如果窗口大小调整,那么一切都会按比例放大/缩小,并保持相同的比例。在小屏幕中这些单词太小无关紧要,首先要防止在调整大小时元素重叠

我试过使用:

<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
原文链接:https://www.f2er.com/html/232885.html

猜你在找的HTML相关文章