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

possible duplicate of How to detect the screen resolution with JavaScript? — zerkms
– zerkms, Commented May 17, 2012 at 10:12
@zerkms I think it is not a duplicate. The screen resolution is not what the OP needs for this purpose. — kapa
– kapa, Commented May 17, 2012 at 10:22

OdinX · Accepted Answer · 2012-05-17 10:22:03Z

3

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);
}

answered May 17, 2012 at 10:22

OdinX

4,2291 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kapa Over a year ago

Even though this does not answer the question, I can't resist upvoting it. Important advice.

Eric Over a year ago

ok .. thanks for your advice .. i will notice that next time .. and thanks also for the suggestion :)

OdinX Over a year ago

No problem, hopefully helped :)

kapa · Accepted Answer · 2012-05-17 10:46:48Z

In your case, this would suffice:

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

jsFiddle Demo

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.

Tuhin Subhra Dey · Accepted Answer · 2012-05-17 10:15:34Z

1

You can try this

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

Thanks.

answered May 17, 2012 at 10:15

Tuhin Subhra Dey

9806 silver badges20 bronze badges

2 Comments

kapa Over a year ago

Yeah, and do you think it is a good idea to use this here? Let me help: no, because the browser's available area is not the same as the screen's available area, and the OP needs the first one. Check demo.

kapa Over a year ago

@Eric This is Javascript, but this is not what you need. If you want to solve your problem with Javascript, you need the size of the viewport. See this question: stackoverflow.com/questions/1248081/…

Dipak · Accepted Answer · 2012-05-17 11:21:30Z

1

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%;
}

answered May 17, 2012 at 11:21

Dipak

12.2k3 gold badges32 silver badges31 bronze badges

1 Comment

kapa Over a year ago

+1 Good solution for the future. I'm glad you liked the background image :). The first result when I searched for "background" in Google Images.

Zaheer Ahmed · Accepted Answer · 2012-05-17 10:15:05Z

0

try:

window.screen.availHeight
window.screen.availWidth

answered May 17, 2012 at 10:15

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

1 Comment

kapa Over a year ago

Please see my comment under @Tuhin's answer, which is the same.

Collectives™ on Stack Overflow

how to detect screen resolution in javascript

5 Answers 5

3 Comments

Comments

2 Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

2 Comments

1 Comment

1 Comment

Linked

Related