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

Question

我在不同的显示器/分辨率下显示html网站时遇到问题。 我正在尝试使用以下脚本解决此问题，但是它不起作用。 我该如何改善？

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

 html { zoom: 100%; } 

Answer 1

您可以在不使用javascript的情况下缩放内容，只需使用mediaquery和应用于html元素的CSS3转换

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

顺便说一句，您的代码无法正常工作，因为您在尝试定位html元素（即document.documentElement或document.querySelector('html')时，正在使用id="html"的元素）

Answer 2

我相信这更多是一个视口和/或CSS媒体查询问题。 您不应该尝试使用javascript来修复页面外观，因为可以将其禁用。 我建议阅读视口视口概述 。 最常用的配对标签是：

<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或更小的宽度和字体大小更改。

我希望这有帮助！