Android écran du navigateur.largeur de l'écran.hauteur & de la fenêtre.innerWidth & de la fenêtre.innerHeight ne sont pas fiables

Je travaille sur une application web qui est destiné aux navigateurs sur ordinateur, tablette et smartphone.

L'application web a une boîte à lumière mis en œuvre à l'aide de Colorbox avec un iframe. Lorsque la fenêtre du navigateur est redimensionnée ou la tablette/téléphone a changé d'orientation, du code Javascript interroge les dimensions de la fenêtre de sorte qu'il peut redimensionner certains éléments de la boîte à lumière.

La question que je vais avoir, c'est que tout fonctionne bien sur le bureau (Windows: internet explorer, Firefox, Chrome, Mac: Safari), iPad & iPhone, mais pas sur les smartphones Android (HTC) et l'Émulateur Android.

Android retourne toujours des valeurs différentes pour screen.width, screen.height, window.innerWidth & window.innerHeight lorsqu'elles sont interrogées à partir de l'intérieur de la fenêtre de redimensionnement de l'événement, qui se déclenche plusieurs fois.

Pourquoi le navigateur Android restitution de ces une large variation dans les valeurs et comment puis-je détecter de manière fiable la largeur et la hauteur de la fenêtre du navigateur?

  • Il n'y a aucun moyen fiable (encore). Cependant, l'écoute de redimensionner et d'attendre un peu (100) millisecondes est généralement suffisant pour les propriétés à définir correctement dans 99% du temps. Il est également important de définir la fenêtre d'affichage et la cible dpi balises meta.
InformationsquelleAutor GiddyUpHorsey | 2012-05-16
  1. 16

    Sur Android, fenêtre.outerWidth et de la fenêtre.outerHeight sont fiable de la taille de l'écran. Selon votre version d'Android, innerWidth/Hauteur est généralement incorrect.

    Voici une très bonne writeup sur la situation.

    • il semble que mon toile élément est dessiné correctement sur la charge et reste ok pour un couple de secondes après le toucher de l'écran pour déplacer l'utilisateur, puis tout à coup il se transforme en une taille beaucoup plus petite (à l'exception de la pleine toile est toujours là, juste dans le noir..., et la plus petite zone visible est encore montré le jeu, mais à 'taille réelle' dimensions plutôt petites). J'ai été en utilisant la fenêtre.innerWidth, essayé avec fenêtre.outerWidth et était toujours le même résultat 🙁
    • le lien est mort ..
    • J'ai aussi un avis sur orientationchange l' 'redimensionner' événement est déclenché millisecondes avant le outerWidth et la hauteur sont modifiées.
    InformationsquelleAutor six8
  2. 4

    Ci-dessous, c'est la différenciation sur la base des relevés avec Samsung Tab sous Android 4.1

    • écran.hauteur - donne le réel de l'appareil en hauteur, y compris la barre des tâches et
      barre de titre

    • fenêtre.innerHeight - donne de la hauteur à l'exclusion de la barre des tâches, barre de titre
      et la barre d'adresse(si visible)

    • fenêtre.outerHeight - donne de la hauteur à l'exclusion de la barre des tâches et le titre
      hauteur de la barre, (peu importe la barre d'adresse est visible ou caché, outerHeight
      inclure l'adresse de la hauteur de la barre.)
    InformationsquelleAutor Ratnakar
  3. 3

    Je suis en utilisant ce travail pour qu'elle entre ios et android.

    var screenHeight = (ionic.Platform.isIOS()) ? window.screen.height : window.innerHeight * window.devicePixelRatio;
    InformationsquelleAutor Jason Engage
  4. 2

    Je m'a pris des heures pour trouver une solution de contournement.

    La seule constante chez window.innerHeight, window.outerheight, etc, c'était screen.height.

    Ce code m'a donné l'outerheight:

    screen.height / window.devicePixelRatio - window.screenTop

    Aussi, afin de prendre en charge les anciennes versions d'android, placez votre code dans un setTimeout

    J'espère que cela est utile =)

    • avec ce code, vous obtiendrez le mal de l'altitude sur les appareils iOS. sur iOS écran.hauteur de retour ou 480 à 568
    InformationsquelleAutor Abdo
  5. 1

    Essayer cela, et de vérifier votre lecture sur mobile

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

    Il doit correspondre à la taille de l'écran (hauteur) de votre téléphone cahier des charges.

    InformationsquelleAutor Miguel
  6. 0
        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);
    InformationsquelleAutor Dan
  7. 0

    Dan la réponse de fixer le inconcistancy entre android du navigateur..
    donc je post comment j'détecter/changer de mobile fenêtre d'affichage et l'adapter lors de la rotation
    (ne sais pas si utilisable pour n'importe quelle...

    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
}
}
    InformationsquelleAutor Yuan Shen
  8. 0

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

    Après quelques recherches, je découvre que les différentes versions d'Android (et périphériques) ont différents devicePixelRatio valeurs.

    Si le devicePixelRatio est égal ou supérieur à 1, le nombre réel de pixels de l'écran (pour le code html de la page point de vue) est donnée par la fenêtre.de l'écran.largeur (ou hauteur...).

    Mais, si la fenêtre.de l'écran.la largeur est inférieure à 1 (il arrive dans certains vieux appareils Android), le nombre réel de pixels devient: fenêtre.de l'écran.largeur/devicePixelRatio.

    Donc, vous avez juste à faire face à cette.

    w = window.screen.width;
h = window.screen.height;

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