webentwicklung-frage-antwort-db.com.de

Javascript, um die Bildschirmbreite des mobilen Browsers zu erkennen?

ich habe screen.width verwendet, um die Breite des Browsers zu ermitteln. Es funktionierte gut mit iPhone Safari, funktionierte aber nicht mit Android-Handys (es zeigte eine Breite von 800 für Android-Browser).

Gibt es eine kompatible Möglichkeit, die Bildschirmbreite zu ermitteln? Ich möchte UserAgent nicht verwenden, um zu überprüfen, ob sein mobiler Browser vorhanden ist. möchte ein Javascript dafür verwenden und die Logik sollte die Bildschirmbreite beinhalten.

javascriptandroidresolution
13
user378132

Es ist ein bekanntes Problem - siehe hier

Beim ersten Laden der Seite sind screen.width und screen.height falsch. Versuchen Sie es mit einem Timeout:

setTimeout(CheckResolution, 300);

Dabei ist CheckResolution Ihre Funktion.

4
SlavaNov

Sie können diese URL versuchen, um die Bildschirmgröße zu ermitteln und einen CSS-Stil anzuwenden

oder

<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

Für diejenigen, die sich für die Breitenwerte des Browsers interessieren, habe ich verschiedene Optionen getestet:

Ich verwende Bootstrap 3 und die EINZIGE Lösung, die die Bootstrap 3-Haltepunkte mit IE und Chrome abgleich:

window.innerWidth

Hier sind die Ergebnisse mit 1200px Fenster mit:

Chrom 

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

Lesen Sie einfach diese beiden URLs. Es sollte Ihnen helfen, das zu bekommen, was Sie brauchen.

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

Zu Ihrer Information, das Android ist wahrscheinlich 800px breit. Siehe diesen Artikel unter anderem: Informationen zur Bildschirmdichte von Samsung Galaxy Tab

Edit: Oh, ich glaube der andere Typ war righter als ich und zeigte auf den Android-Bug.

0
Jamund Ferguson

Ich finde, dass die Verwendung von window.outerWidth den richtigen Wert ergibt. Getestet mit BrowserStack Android-Emulatoren.

0
Obinwanne Hill