javascript HTML 整页缩放取决于屏幕分辨率
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29300907/
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
HTML full page zoom depending on screen resolution
提问by AGOSDIZAJN
I have a problem with displaying my htmlsite on different monitors/resolutions. I was trying to to solve this problem with the following script, but it isn't working. How could I improve this?
我html在不同的显示器/分辨率上显示我的网站时遇到问题。我试图用以下脚本解决这个问题，但它不起作用。我该如何改进？
if (width <= 1280 && height <= 720) {
document.getElementById('html').style.zoom = '50%';html {
zoom: 100%;
}回答by Fabrizio Calderan
You could scale the content without javascript, just using a mediaquery and a CSS3transformation applied to the htmlelement
您可以在没有 javascript 的情况下缩放内容，只需使用 mediaquery 和CSS3应用于html元素的转换
@media screen and (max-width: 1280px) and (max-height: 720px) {
html {
transform: scale(.5);
// or simply zoom: 50%
}
}
as a side note your code can't work because you're looking for an element with id="html", while you're trying to target the htmlelement (that is document.documentElementor document.querySelector('html'))
作为旁注，您的代码无法工作，因为您正在寻找带有 的元素id="html"，而您正在尝试定位该html元素（即document.documentElement或document.querySelector('html')）
回答by patoui2
I believe this is more of a viewport and/or css media query issue. You shouldn't be trying to fix your pages look with javascript because it can be disabled. I would suggestion reading up on viewports Viewport Overview. The most commonly used paired tags are:
我相信这更像是一个视口和/或 css 媒体查询问题。您不应该尝试使用 javascript 修复您的页面外观，因为它可以被禁用。我建议阅读视口Viewport Overview。最常用的配对标签是：
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Those will help with resizing most of the content on the page based on the device width, other changes you'll have to manage more manually via css media queries, here is an example:
这些将有助于根据设备宽度调整页面上大部分内容的大小，您必须通过 css 媒体查询手动管理其他更改，这是一个示例：
@media screen and (max-width: 300px) {
body {
width: 80%;
font-size: 15px;
}
}
The above corresponds to, at 300px or smaller change the width and font size.
以上对应，在 300px 或更小改变宽度和字体大小。
I hope this helps!
我希望这有帮助！
