根据显示器分辨率缩放网站？

Question

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

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

我在我的CSS中得到了这个缩放网站，我喜欢MacBook（1280 x 800）。

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

任何帮助表示赞赏！ :)

Answer 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%;
  }
}

Answer 2

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

@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>