Question

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

我在我的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

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

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

但是，这并没有告诉你窗户有多大，在这种情况下你需要窗户尺寸。见here。相关位：

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.

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

用于检测屏幕尺寸的脚本/代码

1 个答案: