Question

我使用screen.width来获取浏览器的宽度。它与iphone safari工作正常，但在Android手机中无法正常工作（Android浏览器显示800宽度）。

是否有任何兼容的方式来获得屏幕宽度。我不想使用UserAgent来检查它的移动浏览器。我想使用javascript，逻辑应该包括屏幕宽度。

Answer 1

知道问题 - 请参阅here

首次加载页面时，screen.width和screen.height错误。尝试这样的超时：

setTimeout(CheckResolution, 300);

CheckResolution是你的职能。

Answer 2

您可以尝试使用此detect screen size and apply a CSS style

的网址

或

<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

对于那些有兴趣获取浏览器宽度值的人，我测试了几个选项：

我正在使用bootstrap 3，并且与IE和Chrome兼容的bootstrap 3断点的唯一解决方案是：

window.innerWidth

以下是1200px窗口的结果：

<强>铬

$( 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

请阅读这两个网址。它应该可以帮助你获得所需的东西。

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

仅供参考，Android可能是800px宽。查看此文章等： Understanding Samsung Galaxy Tab screen density

编辑：哦，我认为另一个人比我指出了Android错误。

Answer 5

我发现使用window.outerWidth会给出正确的值。使用BrowserStack android模拟器进行测试。

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

5 个答案: