Hauteur de la fenêtre des navigateurs mobiles et mise à l'échelle de la page

Pour les pages larges avec mise à l'échelle, où est le comportement de starge pour les navigateurs mobiles: $ (window) .height () (et document.documentElement.clientHeight) renvoie un faux niveau. Le résultat est moins élevé en réalité. La différence est d'environ 10%

Page de test simple:

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div style="width: 1200px"> <div class="test-block" style="background-color: red"> test block </div> </div> <script type="application/javascript"> var h = $(window).height(); $('.test-block').css('height', h+'px'); </script> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> page bottom<br/> </body> </html>

Par conséquent, la boîte rouge a une hauteur inférieure à celle de la fenêtre

Tout fonctionne bien après avoir retiré la largeur: 1200px => Problème dans la mise à l'échelle de la page (ajustement automatique par largeur de la page).

Comment obtenir une hauteur de fenêtre correcte pour la page avec mise à l'échelle?

Window.innerHeight renvoie un résultat très drôle après un zoom.

Testé sur iphone (safari & chrome), ipad, android 4 (chrome). Pour Opera Mobile, la différence est plus grande

Pour arrêter la page de la mise à l'échelle, essayez d'ajouter la balise suivante à votre section de tête.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Vous pouvez obtenir la largeur et l'étendre ensuite via JavaScript si vous avez vraiment à faire (ce que vous ne devriez pas – le rendre plus réactif à la place).