how to detect screen resolution in javascript
Question
i want let the javascript to detect the screen resolution itself because i might have different LCD and each of them are in different size. this is the code temporary i have.
<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>
i have try to put the javascript into the code
<img src = "screenshot.jpeg" <script type="text/JavaScript">"width ="screen.width </script>>
but it failed. when i open that, i wish it can get the resolution itself at the can anyone help me with this problem ? thanks in advance
5 answers
solution1
3 2012-05-17 10:22:03
You seem to have a few problems with your code:
You can remove JavaScript: from your onLoad event, this is used within hyperlinks
<a href="javascript: doSomething()" />Link</a>
Also you are trying to refresh the page every 1 millisecond (if you are trying to refresh every second you should change it to 1000).
Your function would be better written like this so you avoid using eval :
function timedRefresh(timeoutPeriod) {
setTimeout(function() {
location.reload(true);
}, timeoutPeriod);
}
solution2
2 ACCPTED 2012-05-17 10:12:41
In your case, this would suffice:
<img src = "screenshot.jpeg" width ="100%" />
Of course this will only do what you want if body is the same size as the viewport. This basically tells the browser that the img should be just as big as its parent (in this case the body ).
Note: Javascript does not work the way you expect it. <script> is an HTML element, that lets you embed scripts (Javascript mostly) into your document. You cannot change the HTML source with Javascript on the client side (like you can with PHP, Python, etc. on the server side). You can modify the DOM though.
solution3
1 2012-05-17 10:15:34
You can try this
window.screen.availHeight for getting height
window.screen.availWidth for getting width
Thanks.
solution4
1 2012-05-17 11:21:30
The CSS3 'size' and 'cover' properties also help in this situation only if you are not much worried about older versions of IE. And no need to use any JavaScript
Demo - 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%;
}
solution5
0 2012-05-17 10:15:05
try:
window.screen.availHeight
window.screen.availWidth
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.