resize - 检测屏幕尺寸的脚本/代码

Question

我的页面上有一个包含图像的 div。由于它高 800 像素，距离页面底部 400 像素，因此在较小的显示器上查看时，我的图像从顶部被截断。我没有在我的网站上使用滚动条。

我在我的 div 中添加了一些 CSS 来缩小/缩放内容...

.hello {
width:100%; 
height:800px;
position:fixed; 
top:0;
bottom-margin:400px; 
z-index:0;
-moz-transform: scale(.8);
-webkit-transform: scale(.8);
zoom : .8;
-moz-transform-origin:top center;
-webkit-transform-origin:top center;
}

但是，如果用户的显示器尺寸为 1200px 高或更小，我是否可以实现仅应用缩放/缩放的任何脚本？

提前感谢您的帮助！

Answer 1

您正在寻找的是屏幕分辨率。见这里。相关位：

height
    Returns the height of the screen in pixels.
width
    Returns the width of the screen.

但是，这并不能告诉您窗口有多大，在这种情况下，您将需要窗口尺寸。见这里。相关位：

window.innerHeight
    Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
window.innerWidth
    Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.

我会检测到这一点并适当地更改课程等等。