logo标签列表

调整窗口大小时，将整个主体按比例缩放。

htmlcsstwitter-bootstraplayout
20
我希望创建一个非响应式的网站，但是如果窗口大小被调整，所有元素都会按比例缩放，并保持相同的比例。即使在小屏幕上文字太小也无所谓，首要目标是防止元素重叠。
我已经尝试使用：
<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

问题是，当前调整大小时内容重叠。

1
你可以尝试使用视口单位：http://caniuse.com/#feat=viewport-units - Khanh TO
请注意，MySQL标志不属于公共领域。将其用作头像可能会侵犯某些版权（http://www.mysql.com/about/legal/trademark.html）。但我不是律师。 - RandomSeed
7个回答
12
谢谢您...在从Angular迁移到传统HTML后，我一直在苦苦挣扎调整大小的问题。您的答案解决了我的问题。 - Saad Zahoor
4

<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
只有在窗口加载而非重新调整大小时才起作用

calculateNewScale()函数仅尝试调整body大小 您的字体大小设置为px-将其更改为％或rem

我知道您不希望网站具有响应性，但设置CSS媒体查询可以帮助您实现所需的效果。

3

您可以用于生成响应

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。

2
如果您正在使用Bootstrap，您可以将您的容器类更改为"class =“container-fluid”"。
2
您的视口标签有误，应该是<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">。但是也许<meta name="viewport" content="user-scalable=no" />也可以起作用。
2

您可以做以下几件事情： 1. 更改您的HTML布局。 将图像、内容和页脚放在容器或包装器中，例如

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

  1. 使用rem/em代替px。您没有一致地使用rem/em/vw。这意味着，对于左边距，您使用了50px。在某些情况下，这将导致单词移位。

  2. 您的标签包括bootstrap。如果您正在使用bootstrap……那么最好使用BootStrap Grid。我会先为移动设备构建页面，然后再使用相同的布局来适应更大的屏幕。

祝你好运。

1
使用纯变换：scale(x)，你将会遇到很多边距、居中和定位问题，除非你通过一些javascript逻辑进行补偿。
一些CSS技巧：
1）你可以通过应用以下样式使主背景根据浏览器宽度进行缩放。
body { 
  background-size: cover;
  background-repeat: no-repeat;
}

2）您可以根据vw单位制定所有测量单位，类似于：

基于容器宽度的字体缩放

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

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

另一个例子是，如果你想要一个在1920像素宽度下高度为300像素的容器根据宽度进行缩放，你可以制作该容器。
.container {
  height: 150vw; //around 300px at 1920px
}

假设您并不想在所有尺寸下都将页脚保持在底部？否则，您可以在页脚上使用position:fixed;。

另外，如果您保持固定的宽高比，当浏览器高度大于宽度时，会出现非常奇怪的间距。您确定这是您想要的吗？

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接