Meta tag de viewport ne fonctionne pas comme prévu sur Android

Question

J'ai créé un site Web réactif et j'ai utilisé la balise meta de viewport pour corriger la mise à l'échelle sur différents périphériques. J'ai aussi JavaScript utilisé pour dire les appareils non à l'échelle ci-dessous 525px, comme cela est le min-largeur de mon élément du corps:

<meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" /> 

window.onload = function() { 
    if(window.innerWidth <= 525) { 
     var mvp = document.getElementById('myViewport'); 
     mvp.setAttribute('content','width=525'); 
    } 
} 

Cela fonctionne parfaitement sur presque tous les appareils que je l'ai testé sur; spécifiquement, il fonctionne parfaitement sur les appareils mobiles iOS (iPhones/iPads). Le site est parfaitement mis à l'échelle, tout est adapté à l'écran et l'utilisateur n'a pas besoin de faire défiler horizontalement, de zoomer ou de dézoomer. Toutefois, lorsque vous consultez le site Web sur un appareil Android, il ne correspond pas à l'écran comme prévu.

Pour s'assurer que tout le contenu correspond à l'écran, l'utilisateur doit effectuer un léger zoom arrière. Cela implique que la fenêtre ne fonctionne pas correctement sur les appareils Android. Des idées pourquoi?

Je veux fondamentalement que le site Web se charge sur chaque périphérique et qu'il s'adapte parfaitement à l'écran, afin que l'utilisateur n'ait pas besoin de faire un zoom arrière pour que le contenu s'adapte.

Le lien vers le site est: www.wyevalleycampers.com/Version2/

Answer 1

Lorsque le contenu de la page est plus large que la fenêtre de l'appareil, Chrome charger la page complète zoomée de telle sorte que tout le contenu est visible.

Vous avez trop limité le navigateur dans votre cas. Si le window.innerWidth < = 525, l'appareil de l'utilisateur a une fenêtre d'une taille inférieure à 525 pixels. Vous dites ensuite au navigateur de rendre dans une mise en page de 525 pixels de large. Étant donné que vous avez défini l'échelle minimale et initiale sur 1, le navigateur ne peut pas effectuer un zoom arrière pour afficher tout le contenu. Il doit effectuer un zoom arrière car, à l'échelle = 1, la fenêtre d'affichage est plus petite que la largeur de votre contenu. Supprimer les échelles initiales et minimales devrait aider.

Apple a récemment cessé de respecter l'attribut user-scalable de la balise META viewport, je suppose qu'ils pourraient ne pas respecter minimum-scale pour la même raison.