HTML 整页缩放取决于屏幕分辨率

Question

我在不同 monitors/resolutions 上显示我的 html 网站时遇到问题。我试图用以下脚本解决这个问题，但它不起作用。我该如何改进？

if (width <= 1280 && height <= 720) {
  document.getElementById('html').style.zoom = '50%';

html {
 zoom: 100%;
}

Answer 1

您可以在没有 javascript 的情况下缩放内容，只需使用媒体查询和应用于 html 元素的 CSS3 转换

@media screen and (max-width: 1280px) and (max-height: 720px) {
   html {
      transform: scale(.5);   
      // or simply zoom: 50%
   }
}

作为旁注，您的代码无法工作，因为您正在寻找具有 id="html" 的元素，而您正在尝试定位 html 元素（即 document.documentElement 或 document.querySelector('html'))

Answer 2

我认为这更像是一个视口 and/or css 媒体查询问题。您不应该尝试使用 javascript 修复您的页面外观，因为它可以被禁用。我建议阅读视口 Viewport Overview。最常用的配对标签是：

<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

这些将有助于根据设备宽度调整页面上大部分内容的大小，您将不得不通过 css 媒体查询更多地手动管理其他更改，这是一个示例：

@media screen and (max-width: 300px) {
    body {
        width: 80%;
        font-size: 15px;
    }
}

以上对应，在300px或更小改变宽度和字体大小。

希望对您有所帮助！

HTML full page zoom depending on screen resolution