twitter-bootstrap 调整窗口大小时缩放整个身体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32803764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scale the entire body when resizing the window
提问by user782104
I would like to create a website that is not responsive, but if the windows are resized, everything is scale up / down, and keep the same ratio. It doesn't matter if the words are too small in small screen, the first priority is to prevent the element overlap when resize
我想创建一个没有响应的网站，但是如果调整窗口大小，则所有内容都会放大/缩小，并保持相同的比例。小屏文字太小没关系，首先要防止resize时元素重叠
I have tried using:
我试过使用：
<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
And
和
<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 + ")"
});
}
});
And also with CSS
还有 CSS
body {
width:100vw;
height:100vh;
}
The website is here:
该网站在这里：
kotechweb.com/new_focus/page/about_us
The problem is, right now the content is overlapped when resized.
问题是，现在调整大小时内容会重叠。
采纳答案by Victor Luna
The view port:<meta name="viewport" content="width=device-width, initial-scale=1">. This will make the browser render the width of the page at the width of its own screen.
This article gives more information for the viewport meta tags:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
视口：<meta name="viewport" content="width=device-width, initial-scale=1">。这将使浏览器以自己屏幕的宽度呈现页面的宽度。本文提供了有关视口元标记的更多信息：https:
//developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
回答by Lucky Chingi
<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
works only when the window is loaded not re-sized
<meta id="meta" name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1.0;user-scalable=0;">
仅在窗口加载时有效，不重新-大小
calculateNewScale() function just tries to resize the body Your font size are set in px - change them to % or rem
calculateNewScale() 函数只是尝试调整主体的大小您的字体大小以 px 为单位设置 - 将它们更改为 % 或 rem
I know you dont want the site responsive but setting CSS media queries can help with what you want.
我知道您不希望网站具有响应性，但设置 CSS 媒体查询可以帮助您实现所需的功能。
回答by Vyankatesh Shirde
you can use for make response
你可以用来做出回应
1.width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). 2.initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. e.g. meta name="viewport" content="width=device-width, initial-scale=1.0"
1.width=device-width 部分设置页面的宽度跟随设备的屏幕宽度（这会因设备而异）。2.initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。例如 meta name="viewport" content="width=device-width, initial-scale=1.0"
some additional rules: 1. Do NOT use large fixed width elements 2. Do NOT let the content rely on a particular viewport width to render well 3. Use CSS media queries to apply different styling for small and large screens
一些额外的规则： 1. 不要使用大的固定宽度元素 2. 不要让内容依赖特定的视口宽度来渲染 3. 使用 CSS 媒体查询为小屏幕和大屏幕应用不同的样式
also you can use media property and apply screen wise css.
您也可以使用媒体属性并应用屏幕明智的 css。
回答by sagarthapa
There are few things you can do: 1. change your HTML layout. Put image, content and footer within a container or wrapper like
您可以做以下几件事： 1. 更改您的 HTML 布局。将图像、内容和页脚放入容器或包装器中，例如
<html>
<head></head>
<body>
<div id="wrapper">
//everything goess inside here
</div>
</body>
</html>
use rem/em instead of px. You haven't used rem/em/vw consistently. Meaning, for left-margin you have used 50px. And there will be time when it will cause word shift.
your tag includes bootstrap. If you are using bootstrap....then you are better off using BootStrap Grid. I would first build a page for mobile viewing and then I will use same layout for bigger screen.
使用 rem/em 代替 px。你没有一直使用 rem/em/vw。意思是，对于左边距，您使用了 50px。并且有时间会导致字移。
您的标签包括引导程序。如果您正在使用引导程序....那么您最好使用引导程序网格。我将首先构建一个用于移动查看的页面，然后我将为更大的屏幕使用相同的布局。
good luck.
祝你好运。
回答by Mark
If you are using bootstrap, you could simply change your container class to class = "container-fluid"
如果您使用引导程序，您可以简单地将容器类更改为 class = "container-fluid"
回答by andreasbecker.de
Your viewport tag is wrong, should be <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
你的视口标签是错误的，应该是 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
But maybe <meta name="viewport" content="user-scalable=no" />will work.
但也许<meta name="viewport" content="user-scalable=no" />会奏效。
回答by Vincent Chan
Using pure transform: scale(x), you are going to run into a lot of margin, centering, and positioning issues, unless you compensate with some javascript logic.
使用纯转换：scale(x)，你会遇到很多边距、居中和定位问题，除非你用一些 javascript 逻辑来补偿。
Some CSS things you can do:
你可以做的一些 CSS 事情：
1) You can make the main background scale based on browser width by applying
1）您可以通过应用根据浏览器宽度制作主背景比例
body {
background-size: cover;
background-repeat: no-repeat;
}
2) You can make all measurement units based on vw units similar to this:
2）您可以根据与此类似的 vw 单位制作所有测量单位：
Font scaling based on width of container
for instance, if you want your fonts to scale proportionate to your width, you can set
例如，如果您希望字体与宽度成比例，则可以设置
body {
font-size: 0.835vw; //around 14px at 1920px
}
Another example is if you want a container that is 300px high at 1920px width to scale based on width, you can make that container
另一个例子是，如果你想要一个高 300 像素、宽 1920 像素的容器根据宽度进行缩放，你可以制作该容器
.container {
height: 150vw; //around 300px at 1920px
}
Presumably you are not trying to keep the footer at the bottom at all sizes? Otherwise you can just use position:fixed; on the footer.
想必您不打算在所有尺寸下都将页脚保持在底部？否则你可以只使用 position:fixed; 在页脚上。
Also, if you keep a fixed aspect ratio, you are going to have very funny spacing if the browser height is taller than the width. Are you sure this is what you want?
此外，如果您保持固定的纵横比，如果浏览器高度高于宽度，您将获得非常有趣的间距。你确定这是你想要的吗？
Keep in mind, this is a very odd way to resize content which could result in performance and readibility issues (which you are aware). Most people would recommend just using a meta tag for devices, or making your elements responsive.
请记住，这是调整内容大小的一种非常奇怪的方法，可能会导致性能和可读性问题（您知道）。大多数人会建议只为设备使用元标记，或者让您的元素具有响应性。
