L'écran screen.width du navigateur Android, screen.height & window.innerWidth & window.innerHeight n'est pas fiable

Sur Android, window.outerWidth et window.outerHeight sont fiables, la taille de l'écran. Selon votre version d'Android, innerWidth / Height est généralement incorrect.

Voici une très bonne écriture sur la situation.

Vous trouverez ci-dessous une différentiation basée sur des lectures avec Samsung Tab avec Android 4.1

• Screen.height – donne la hauteur réelle du périphérique, y compris la barre des tâches et la barre de titre
• Window.innerHeight – donne la hauteur hors barre de tâches, barre de titre et barre d'adresse (si visible)
• Window.outerHeight – donne la hauteur, à l'exclusion de la barre des tâches et de la hauteur de la barre de titre (quelle que soit la barre d'adresse visible ou cachée, outerHeight inclut la hauteur de la barre d'adresse).

Je me suis pris des heures pour trouver une solution de contournement.

La seule constante parmi window.innerHeight , window.outerheight , etc. était screen.height .

Ce code m'a donné l'aile extérieure:

 screen.height / window.devicePixelRatio - window.screenTop 

En outre, afin de prendre en charge les anciennes versions d'Android, placez votre code dans un setTimeout

J'espère que cela est utile =)

J'utilise ceci pour le faire fonctionner entre ios et l'Android.

 var screenHeight = (ionic.Platform.isIOS()) ? window.screen.height : window.innerHeight * window.devicePixelRatio; 

Essayez ceci et vérifiez votre lecture mobile

 <script> var total_height=screen.height*window.devicePixelRatio; alert(total_height); </script> 

Il devrait correspondre à la taille de l'écran (hauteur) des spécifications de votre téléphone.

  var throttle = (function () { var timer; return function (fn, delay) { clearTimeout(timer); timer = setTimeout(fn, delay); }; })(), var callback = function (w, h) { alert(w + ' ' + h); } window.onresize = throttle(function () { width = Math.min(window.innerWidth, window.outerWidth); height = Math.min(window.innerHeight, window.outerHeight); callback(width, height); }, 60); 

La réponse de Dan corrige la inconstance entre le navigateur d'Android … Donc, je publie comment je détecte / modifie la console mobile et l'adapte en tournant (ne sais pas si elle est utilisable pour n'importe qui …

 var lastorg=0; //set the begining of script thisorg=parseInt(window.innerWidth)/parseInt(window.innerHeight); //for ratio to detact orietation if(((lastorg<1 && thisorg>1) ||(lastorg>1 && thisorg<1) ||lastorg==0 )){ //is start or change $("#viewport").attr('content', 'width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1'); // reset viewport to device mywidth = Math.min(window.innerWidth, window.outerWidth); //Dan's way to fix the inconsistancy myheight = Math.min(window.innerHeight, window.outerHeight); lastorg=thisorg; //update the lastorg wr=parseInt(mywidth)/1280; // the minimum desire width hr=parseInt(myheight)/630; // the minimum desire height if(hr<wr){ vscale=hr; if(hr<1){ // if it if small screen, so desktop pc wouldn't change windowHeight=630; windowwidth=mywidth/hr; } }else{ vscale=wr; if(wr<1){ windowwidth=1280; windowHeight=myheight/wr; } } $("#viewport").attr('content', 'width=device-width, initial-scale='+vscale+',minimum-scale='+vscale+', maximum-scale='+vscale); //reset viewport toresize window if(thisorg>1){ $("#pro").fadeOut(500); }else{ $("body").prepend("<div id=pro style='position:absolute;width:800px;height:30px;padding:30px;left:"+(windowwidth/2)+"px;top:"+(windowHeight/2)+"px;margin-left:-430px;margin-top:-45px;;border:1px solid #555;background:#ddeeff;text-align:center;z-index:99999;color:#334455;font-size:40px;' class=shadowme>Please rotate your phone/tablet</div>");//tell user to rotate } } 

Dans mon cas, le crochet setTimeout n'était pas utile.

Après un certain creusement, je découvre que différentes versions Android (et appareils) ont différentes valeurs de DevicePixelRatio.

Si le dispositifPixelRatio est égal ou supérieur à 1, le nombre réel de pixels dans l'écran (pour le point de vue de la page html) est donné par window.screen.width (ou … height).

Mais, si la fenêtre.screen.width est inférieure à 1 (cela se produit dans certains anciens appareils Android), le nombre réel de pixels devient: window.screen.width / devicePixelRatio.

Donc, il vous suffit de faire face à cela.

 w = window.screen.width; h = window.screen.height; if(window.devicePixelRatio < 1){ w = window.screen.width/window.devicePixelRatio; h = window.screen.height/window.devicePixelRatio; }