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

【问题标题】：Scale the entire body when resizing the window调整窗口大小时缩放整个主体
【发布时间】：2015-12-24 13:26:44
【问题描述】：

我想创建一个没有响应的网站，但如果调整窗口大小，所有内容都会按比例放大/缩小，并保持相同的比例。小屏文字太小没关系，第一要务是防止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

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

【问题讨论】：

你可以试试视口单位：caniuse.com/#feat=viewport-units
请注意，MySQL 标志不在公共领域。将其用作头像可能会侵犯某些版权 (mysql.com/about/legal/trademark.html)。但是 IANAL。

标签： html css twitter-bootstrap layout

【解决方案1】：

使用纯变换：scale(x)，你会遇到很多边距、居中和定位问题，除非你用一些 javascript 逻辑来弥补。

你可以做的一些 CSS 事情：

1) 您可以通过应用来根据浏览器宽度制作主背景缩放

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

2) 你可以根据类似这样的 vw 单位来制作所有的测量单位：

Font scaling based on width of container

例如，如果您希望字体与您的宽度成比例，您可以设置

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

另一个例子是，如果您想要一个 300px 高、1920px 宽度的容器根据宽度进行缩放，您可以制作该容器

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

大概您不是想在所有尺寸下都将页脚保持在底部？否则你可以使用 position:fixed;在页脚。

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

请记住，这是调整内容大小的一种非常奇怪的方式，可能会导致性能和可读性问题（您知道这一点）。大多数人会建议只为设备使用元标记，或者让您的元素具有响应性。

【讨论】：

【解决方案2】：

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

但也许<meta name="viewport" content="user-scalable=no" /> 会起作用。

【讨论】：

【解决方案3】：

仅在加载窗口而不调整大小时才有效

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

我知道您不希望网站具有响应性，但设置 CSS 媒体查询可以满足您的需求。

【讨论】：

【解决方案4】：

你可以用来做出回应

1.width=device-width 部分设置页面的宽度以跟随设备的屏幕宽度（这将取决于设备）。 2.initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。例如meta name="viewport" content="width=device-width, initial-scale=1.0"

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

您也可以使用媒体属性并应用屏幕级 css。

【讨论】：

【解决方案5】：

如果您使用引导程序，您只需将容器类更改为 class= "container-fluid"

【讨论】：

【解决方案6】：

您可以做的事情很少： 1. 改变你的 HTML 布局。将图像、内容和页脚放入容器或包装器中，例如

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

使用 rem/em 代替 px。您没有始终如一地使用 rem/em/vw。意思是，对于左边距，您使用了 50px。并且有时间会引起字移。
您的标签包含引导程序。如果您使用的是引导程序......那么您最好使用引导程序网格。我会先构建一个用于移动查看的页面，然后我将使用相同的布局来获得更大的屏幕。

祝你好运。

【讨论】：

【解决方案7】：

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

【讨论】：