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

HTML full page zoom depending on screen resolution

本文关键字：屏幕 分辨率 取决于 缩放 HTML      更新时间：2023-09-26

我在不同的监视器/分辨率上显示html站点时遇到问题。我试图用下面的脚本来解决这个问题，但它不起作用。我该如何改进？

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

您可以在没有javascript的情况下缩放内容，只需使用mediaquery和应用于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')）为目标。

我认为这更多的是一个视口和/或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或更小的地方更改宽度和字体大小。

我希望这能有所帮助！

相关文章：