缩放网站取决于显示器分辨率？答案

【问题标题】：Zoom website depending on monitor resolution?缩放网站取决于显示器分辨率？
【发布时间】：2015-01-12 18:33:42
【问题描述】：

我正在寻找一个 javascript 来根据 viwewers 的屏幕分辨率更改网站的缩放比例。我用 1920x1080p 在我的桌面上制作了这个网站：/

html { -moz-transform: scale(0.75, 0.75); zoom: 0.75; zoom: 75%; }

我在我的 css 中得到了这个，以便将网站缩放到我喜欢的 MacBook (1280 x 800)。

但是我不知道如何使用 javascript 启用/禁用它（如果可能的话？）以及如何检测分辨率。

如有任何帮助，我们将不胜感激！ :)

【问题讨论】：

标签： javascript html css zooming resolution

【解决方案1】：

试试这个：

@media(max-device-width:1280px){
  html{
    -moz-transform: scale(0.75, 0.75);
    zoom: 0.75;
    zoom: 75%;
  }
}

@media(max-device-width:800px){
  html{
    -moz-transform: scale(0.50, 0.50);
    zoom: 0.50;
    zoom: 50%;
  }
}

【讨论】：

【解决方案2】：

css @media 查询会帮助你，不需要 javascript.for example

@media screen and (max-width: 1280px) {
  html {
    -moz-transform: scale(0.75, 0.75);
    zoom: 0.75;
    zoom: 75%;
  }
}
@media screen and (max-width: 800px) {
  html {
    -moz-transform: scale(0.50, 0.50);
    zoom: 0.50;
    zoom: 50%;
  }
}

如果您特别想要 javascript，请查看窗口屏幕对象 w3schools

 <script>alert("Screen Width: " + screen.width);</script>

【讨论】：

我复制了你写的所有内容，将屏幕更改为屏幕，因为我认为这是一个错字，我还将 1280 像素更改为 1440 像素，因为显然 Mac 具有更高的分辨率。但这似乎不起作用：o
抱歉没用，请查看w3schools @media。有各种不同的方法可以尝试。看看我刚刚找到的第二个答案HERE, SO media queries question