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

我想创建一个没有响应的网站，但是如果窗口被调整大小，一切都是向上/向下缩放，并保持相同的比例。如果单词在小屏幕上太小没关系，当resize

时，首要任务是防止元素重叠。

我试过使用:

<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">。这将使浏览器以自己屏幕的宽度呈现页面的宽度。本文给出了viewport meta标签的更多信息:https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

仅在加载窗口时有效

calculateNewScale()函数只是尝试调整body的大小你的字体大小设置为px -将它们更改为%或rem

我知道你不希望网站响应，但设置CSS媒体查询可以帮助你想要的。

你可以使用

1。Width =device- Width部分设置页面的宽度以跟随设备的屏幕宽度(这将根据设备而变化)。initial-scale=1.0部分设置浏览器第一次加载页面时的初始缩放级别。例如:meta name="viewport" content="width=device-width, initial-scale=1.0"

一些附加规则:1. 不要使用大的固定宽度元素2. 不要让内容依赖于特定的视口宽度来渲染3.使用CSS媒体查询为小屏幕和大屏幕应用不同的样式

也可以使用media property和screen wise css

你可以做以下几件事:1. 更改HTML布局。将图像、内容和页脚放入容器或包装器中，如

<html>
  <head></head>
  <body>
    <div id="wrapper">
      //everything goess inside here
    </div>
  </body>
</html>

使用rem/em代替px。你没有一直使用rem/em/vw。也就是说，左距使用50px。有时候会造成文字移位。

你的标签包含bootstrap。如果您正在使用引导....那么你最好使用BootStrap网格。我将首先建立一个页面的移动观看，然后我将使用相同的布局为更大的屏幕。

好运。

如果使用的是bootstrap，则只需将容器类更改为class=" container-fluid"

你的viewport标签是错误的，应该是<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

但也许<meta name="viewport" content="user-scalable=no" />将工作

使用纯transform: scale(x)，你会遇到很多边距、居中和定位问题，除非你用一些javascript逻辑进行补偿。

你可以做的一些CSS事情:

1)你可以使用

使主背景的大小基于浏览器的宽度

body { 
  background-size: cover;
  background-repeat: no-repeat;
}

2)你可以让所有的测量单位基于大众单位类似于这样:

基于容器宽度的字体缩放

例如

，如果你想让你的字体与宽度成比例，你可以设置

body {
  font-size: 0.835vw; //around 14px at 1920px
}

另一个例子是如果你想要一个高度为300px宽度为1920px的容器根据宽度进行缩放，你可以将该容器设置为

.container {
  height: 150vw; //around 300px at 1920px
}

想必你没有试图保持底部的页脚在所有大小?否则你可以使用position:fixed;

另外，如果你保持一个固定的长宽比，如果浏览器的高度比宽度高，你将会有非常有趣的间距。你确定你想这样吗?

请记住，这是一种非常奇怪的调整内容大小的方式，可能会导致性能和可读性问题(您已经意识到了)。大多数人会建议在设备上使用元标签，或者让你的元素响应。

相关内容

最新更新

热门标签：