如何在javascript中檢測屏幕分辨率

我想讓javascript檢測屏幕分辨率本身，因爲我可能有不同的LCD，並且它們每個都有不同的大小。這是我暫時的代碼。如何在javascript中檢測屏幕分辨率

<html> 
<head> 
<title>ViewImage</title> 
<script type="text/JavaScript"> 
<!-- 
function timedRefresh(timeoutPeriod) { 
setTimeout("location.reload(true);",timeoutPeriod); 
} 
// --> 
</script> 
</head> 
<body onload="JavaScript:timedRefresh(1);"> 

<img src = "screenshot.jpeg" width="1014" height="751"> 
</body> 
</html>

我已經儘量把JavaScript插入代碼

<img src = "screenshot.jpeg" <script type="text/JavaScript">"width ="screen.width </script>>

，但失敗了。當我打開它，我希望它可以得到的決議本身在任何人都可以幫助我解決這個問題？在此先感謝

來源

2012-05-17 Eric

的可能重複[？如何檢測與JavaScript的屏幕分辨率（http://stackoverflow.com/questions/2242086/how-to -detect-the-screen-resolution-with-javascript） – zerkms

@zerkms我認爲它不是重複的。屏幕分辨率不是OP爲此所需要的。 – kapa

在你的情況，這就夠了：

<img src = "screenshot.jpeg" width ="100%" />

jsFiddle Demo

當然，這隻會做你想要什麼，如果body的大小與視口一樣。這基本上告訴瀏覽器img應該是它的父母一樣大（在這種情況下是body）。

注： JavaScript不工作，你期望它的方式。 <script>是一個HTML元素，它允許您將腳本（主要是Javascript）嵌入到文檔中。您不能在客戶端使用Javascript更改HTML源代碼（就像您可以在服務器端使用PHP，Python等一樣）。你可以修改DOM。

來源

2012-05-17 10:12:41 kapa

嘗試：

window.screen.availHeight 
window.screen.availWidth

來源

2012-05-17 10:15:05

這是javascript的權利？ – Eric

-1不，這不是OP需要的。 – kapa

是的，這是javascript。 –

你可以試試這個

window.screen.availHeight for getting height 
window.screen.availWidth for getting width

感謝。

來源

2012-05-17 10:15:34

是的，你認爲在這裏使用它是個好主意嗎？讓我幫忙：不，因爲瀏覽器的可用區域與屏幕的可用區域不同，並且OP需要第一個區域。 [檢查演示]（http://jsfiddle.net/Z3a34/1/）。 – kapa

這是javascript的權利？ – Eric

是的..當然。 –

你似乎有你的代碼的幾個問題：

您可以從onLoad事件刪除JavaScript:，這是超鏈接中使用

<a href="javascript: doSomething()" />Link</a>

而且你試圖刷新頁面每1毫秒（如果您試圖每秒更新一次，則應將其更改爲1000）。

你的功能將得到更好的這樣寫的，所以你避免使用eval：

function timedRefresh(timeoutPeriod) { 
    setTimeout(function() { 
     location.reload(true); 
    }, timeoutPeriod); 
}

來源

2012-05-17 10:22:03 vimist

儘管這並沒有回答這個問題，但我無法抗拒它。重要的建議。 – kapa

行..謝謝你的建議..我會注意到，下次..也感謝你的建議:) – Eric

沒問題，希望有所幫助:) – vimist

CSS3的「大小」和「蓋」的屬性也是在這情況下只幫助，如果你不是老版本的焦慮，的IE。並且無需使用任何JavaScript

演示 - http://jsfiddle.net/fHwu8/

body{ 
    background: #000 url(http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg) left top fixed no-repeat; 
    background-size: 100% 100%; 
    -moz-background-size: 100% 100%; /*cover*/ 
    -webkit-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
}

來源

2012-05-17 11:21:30 Dipak

+1好的解決方案的未來。我很高興你喜歡背景圖片:)。我在Google圖片中搜索「背景」時的第一個結果。 – kapa

如何在javascript中檢測屏幕分辨率

回答

相關問題