Javascript to detect mobile browser screen width?

Question

i used screen.width to get the width of the browser. it worked fine with iphone safari but didn't work in android phone(it showed 800 width for android browser).

Is there any compatible way to get the screen width. I dont want to use UserAgent to check if its mobile browser. would like to use a javascript for that and logic should include screen width.

SlavaNov · Answer 1 · 2011-12-14T16:48:27.223

4

It's know issue - see here

When page first loads the screen.width and screen.height are wrong. Try a timeout like this:

setTimeout(CheckResolution, 300);

Where CheckResolution is your function.

edited Dec 14 '11 at 16:48

answered Dec 14 '11 at 16:33

SlavaNov

2,447
1
18
26

score 3 · Answer 2 · answered Dec 14 '11 at 16:32

You may try this url for detect screen size and apply a CSS style

or

<script type="text/javascript">

  function getWidth()
  {
    xWidth = null;
    if(window.screen != null)
      xWidth = window.screen.availWidth;

    if(window.innerWidth != null)
      xWidth = window.innerWidth;

    if(document.body != null)
      xWidth = document.body.clientWidth;

    return xWidth;
  }
function getHeight() {
  xHeight = null;
  if(window.screen != null)
    xHeight = window.screen.availHeight;

  if(window.innerHeight != null)
    xHeight =   window.innerHeight;

  if(document.body != null)
    xHeight = document.body.clientHeight;

  return xHeight;
}

</script>


screen.height           shows the height of the screen
screen.width            shows the width of the screen
screen.availHeight  shows height but removes the interface height like taskbar, and browser menu etc.
screen.availWidth   same as above,instead gives available width

score 1 · Answer 3 · answered Apr 28 '14 at 14:01

For those interested in getting the width values of the browser, I tested several options:

I am using bootstrap 3 and the ONLY solution matching the bootstrap 3 breakpoints with both IE and Chrome was :

window.innerWidth

Here are the results with 1200px window with:

Chrome

$( window ).width(): 1183
$( document ).width():1183
screen.width: 1536
$( window ).innerWidth():1183
$( document ).innerWidth():1183
window.innerWidth: 1200
$( document ).outerWidth():1183 
window.outerWidth: 1216
document.documentElement.clientWidth: 1183

Internet Explorer 10

$( window ).width(): 1200
$( document ).width():1200
screen.width: 1536
$( window ).innerWidth():1200
$( document ).innerWidth():1200
window.innerWidth: 1200
$( document ).outerWidth():1200
window.outerWidth: 1214
document.documentElement.clientWidth: 1200

score 0 · Answer 4 · answered Mar 14 '13 at 23:23

0

I find that using window.outerWidth gives the correct value. Tested this using BrowserStack android emulators.

answered Mar 14 '13 at 23:23

ObiHill

11,448
20
86
135

This just returns the width of the entire window including the chrome and everything. – malthoff Sep 27 '13 at 08:48

score 0 · Answer 5 · edited May 23 '17 at 12:14

0

Just read these two URLs. It should help you get what you need.

http://www.quirksmode.org/blog/archives/2010/08/combining_media.html http://www.quirksmode.org/mobile/tableViewport.html

FYI, the Android probably is 800px wide. See this article among others: Understanding Samsung Galaxy Tab screen density

Edit: Oh, I think the other guy was righter than me that pointed to the Android bug.

edited May 23 '17 at 12:14

Community

1
1

answered Dec 14 '11 at 16:42

Jamund Ferguson

16,721
3
42
50

Javascript to detect mobile browser screen width?

5 Answers5

Linked