web-dev-qa-db-ja.com

モバイルブラウザの画面幅を検出するJavaScript

ブラウザの幅を取得するためにscreen.widthを使用しました。それはiphoneサファリでうまく機能しましたが、Android電話では機能しませんでした（Androidブラウザ）で800の幅を示しました）。

画面幅を取得する互換性のある方法はありますか？ UserAgentを使用してモバイルブラウザかどうかを確認したくありません。そのためにJavaScriptを使用したいとロジックは画面の幅を含める必要があります。

javascriptandroidresolution
13
user378132

既知の問題です-参照 ここ

ページが最初に読み込まれるとき、screen.widthとscreen.heightが間違っています。次のようなタイムアウトを試してください：

setTimeout(CheckResolution, 300);

ここで、CheckResolutionは関数です。

4
SlavaNov

このURLを試して 画面サイズを検出し、CSSスタイルを適用することができます

または

<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
3
Sameera Thilakasiri

ブラウザーの幅の値を取得することに関心がある人のために、いくつかのオプションをテストしました。

私はbootstrap 3とbootstrap 3つのブレークポイントにIEとChromeは：

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 1

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

この2つのURLを読んでください。それはあなたが必要なものを手に入れるのを助けるはずです。

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

参考までに、Android幅はおそらく800pxです。とりわけこの記事を参照してください： Samsung Galaxyタブの画面密度について

編集：ああ、私は他の人がAndroidバグを指摘した私よりも正しかったと思います。

0
Jamund Ferguson

window.outerWidthは正しい値を示します。 BrowserStack Androidエミュレータを使用してこれをテストしました。

0
Obinwanne Hill