web-dev-qa-db-fra.com

Javascript pour détecter la largeur de l'écran du navigateur mobile?

j'ai utilisé screen.width pour obtenir la largeur du navigateur. cela fonctionnait bien avec iphone safari mais ne fonctionnait pas sur les téléphones Android (il affichait une largeur de 800 pour le navigateur Android).

Existe-t-il un moyen compatible d'obtenir la largeur de l'écran? Je ne veux pas utiliser UserAgent pour vérifier si son navigateur mobile. voudrait utiliser un javascript pour cela et la logique devrait inclure la largeur de l'écran.

javascriptandroidresolution
13
user378132

C'est savoir question - voir ici

Lorsque la page est chargée pour la première fois, screen.width et screen.height sont incorrects. Essayez une temporisation comme celle-ci:

setTimeout(CheckResolution, 300);

Où CheckResolution est votre fonction.

4
SlavaNov

Vous pouvez essayer cette URL pour détecter la taille d’écran et appliquer un style CSS

ou

<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

Pour ceux intéressés à obtenir les valeurs de largeur du navigateur, j'ai testé plusieurs options:

J'utilise bootstrap 3 et la SEULE solution correspondant aux points d'arrêt du bootstrap 3 avec IE et Chrome:

window.innerWidth

Voici les résultats avec une fenêtre 1200px avec:

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

Il suffit de lire ces deux URL. Cela devrait vous aider à obtenir ce dont vous avez besoin.

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

Pour votre information, le Android est probablement 800px large. Voir cet article parmi d’autres: Comprendre la densité d’écran du Samsung Galaxy Tab

Edit: Oh, je pense que l’autre était plus droit que moi et qu’il évoquait le bogue Android.

0
Jamund Ferguson

Je trouve que l'utilisation de window.outerWidth donne la valeur correcte. Testé avec des émulateurs BrowserStack Android.

0
Obinwanne Hill