用于检测移动浏览器屏幕宽度的Javascript？

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.

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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.