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

Answer 2

＆lt; meta id =＆＃34; meta＆＃34;命名=＆＃34;视＆＃34;含量=＆＃34;宽度=设备宽度;初始规模= 1.0;最大规模= 1.0;用户可扩展= 0;＆＃34;＆GT;
仅在窗口加载时未重新调整大小

时才起作用

calculateNewScale（）函数只是试图调整主体的大小您的字体大小设置为px - 将它们更改为％或rem

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

Answer 3

你可以用来做出回复

1.width = device-width part将页面宽度设置为遵循设备的屏幕宽度（具体取决于设备）。 2.initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。例如meta name =＆＃34; viewport＆＃34; content =＆＃34; width = device-width，initial-scale = 1.0＆＃34;

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

您也可以使用媒体资源并应用屏幕智能css。

Answer 4

您的视口标记错误，应为<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

但也许<meta name="viewport" content="user-scalable=no" />可行。

Answer 5

你可以做的事情很少： 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 Grid。我首先构建一个用于移动查看的页面，然后我将使用相同的布局来获得更大的屏幕。

Answer 6

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

Answer 7

使用纯变换：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;在页脚上。

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

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

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

7 个答案: