檢測屏幕尺寸的腳本/代碼

我的頁面上有一個包含圖像的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

檢測屏幕尺寸的腳本/代碼

回答

相關問題