Question

我在使用不同的显示器/分辨率显示我的html网站时遇到问题。我试图用以下脚本解决这个问题，但它不起作用。我怎么能改善这个？

＆＃13;

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

＆＃13;

html {
	zoom: 100%;
}

＆＃13;

Answer 1

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

@media screen and (max-width: 1280px) and (max-height: 720px) {
   html {
      -webkit-transform: scale(.5);
      -moz-transform: scale(.5);
      transform: scale(.5);

      // or simply zoom: 50%
   }
}

作为旁注，您的代码无法正常工作，因为您正在寻找id="html"的元素，而您正在尝试定位html元素（即是document.documentElement或document.getElementsByTagName('html')[0]）

Answer 2

我认为这更像是一个视口和/或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全页缩放取决于屏幕分辨率

2 个答案: