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

我的页面上有一个包含图像的div。由于它的高度为800像素，距离页面底部400像素，因此在较小的显示器上观看时，图像会从顶部切断。我没有在我的网站上使用滚动条。检测屏幕尺寸的脚本/代码

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

.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或更小？

在此先感谢您的帮助！

来源

2013-03-20 user974254

你在找什么是屏幕分辨率。请参阅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.

我会检测到这一点，并改变类和适当的东西。

来源

2013-03-20 02:29:35 tjameson

感谢您的回复。我如何去使用Javascript将CSS类应用于div？我愿做这样的事情：如果（window.innerHeight <= 1200） { APPLY “HELLO” 类DIV } 其他 { APPLY “HELLO2” 类DIV } – user974254 2013-03-20 03:59:48

@ user974254 - HTTP： //stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript – tjameson 2013-03-20 05:35:08

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

回答

相关问题