Page complète et balise méta désactivée de la vue de zoom pour tous les navigateurs mobiles

Question

Je souhaite que ma page Web soit en plein écran et désactive le zoom sur tous les appareils mobiles.

Avec la balise meta:

 <meta name="viewport" content="width=1165, user-scalable=no">
 

Je suis capable de le faire pour iPhone / iPad, mais sur les appareils Android, le site Web est agrandi à environ 125%.

Si j'utilise le tag

 <meta name="viewport" content="width=max-device-width, user-scalable=no">
 

J'obtiens le résultat opposé. Alors ça marche sur Android mais ça ne marche pas sur iPad / iPhone.

Answer 1

Malheureusement, chaque navigateur a sa propre implémentation de la fenêtre d'affichage de la balise meta. Différentes combinaisons de travail sur les différents navigateurs.

Android 2.2: fenêtre d'affichage de la balise meta ne semble pas être pris en charge.

Android 2.3.x/3.x: Par la mise en user-scalable=no vous désactivez la mise à l'échelle de la fenêtre d'affichage de la balise meta vous-même ainsi. C'est probablement la raison pour laquelle la largeur de votre option est d'avoir aucun effet. Pour permettre au navigateur de l'échelle de votre contenu, vous devez définir user-scalable=oui, alors pour désactiver le zoom, vous pouvez définir le min et max de l'échelle à la même valeur, donc il ne peut pas rétrécir ou grandir. Jouet à l'échelle initiale jusqu'à ce que votre site s'adapte parfaitement.

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />

Android 4.x: Même règle s'applique que 2.3.x, à l'exception du min et du max échelles ne sont pas respectées plus et si vous utilisez user-scalable=oui , l'utilisateur peut toujours faire un zoom avant, le réglage " non " signifie que votre échelle est ignoré, c'est la question que je me pose maintenant qui m'a attiré vers cette question... Vous ne semblez pas à désactiver le zoom et l'échelle à la même période en 4.x.

iOS/Safari (4.x/5.x testé): les Échelles de travail comme prévu, vous pouvez désactiver la mise à l'échelle avec user-scalable=0 (mots-clés oui/non je ne travail pas en 4.x). iOS/Safari n'a pas de notion de cible-densitydpi de sorte que vous devrait laisser le soin à éviter les erreurs. Vous n'avez pas besoin de min et de max depuis, vous pouvez désactiver le zoom dans la manière attendue. Utilisez uniquement la largeur ou vous allez lancer dans l' iOS d'orientation bug

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />

Chrome: les Échelles de travail comme prévu, comme ils le font dans iOS, min et max sont à l'honneur et vous pouvez désactiver le zoom en utilisant user-scalable=no.

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />

Conclusion: Vous pouvez utiliser quelques-uns assez simple JS pour définir le contenu en conséquence, après quelques notions de navigateur/dispositif de détection. Je sais que ce type de détection est mal vu, mais dans ce cas, il est presque inévitable parce que chaque fournisseur a disparu et fait leur propre chose! Espérons que cela aide les gens à combattre la fenêtre d'affichage, et si quelqu'un a une solution pour désactiver le zoom dans Android 4.x SANS l'utilisation de la fenêtre d'affichage, s'il vous plaît laissez-moi savoir.

[MODIFIER]

Android 4.x le navigateur google Chrome (qui je pense est pré-installé dans la plupart des pays): Vous pouvez assurez-vous que l'utilisateur ne peut pas zoomer et de la page en plein écran. L'inconvénient: vous devez vous assurer que le contenu a une largeur fixe. Je n'ai pas testé sur les versions d'Android inférieures. Pour ce faire, voir l'exemple:

<meta name="viewport" content="width=620, user-scalable=no" />

[EDIT 2]

iOS/Safari 7.1: Depuis la v7.1, Apple a introduit un nouveau drapeau pour la fenêtre d'affichage de la balise meta appelés minimal-ui. Pour aider avec les apps en plein écran, ce qui permet de masquer la barre d'adresse et la barre d'outils en bas pour un affichage plein écran (pas tout à fait Plein Écran API, mais étroite et ne nécessite pas d'acceptation par l'utilisateur). Il ne vient avec sa juste part de bugs ainsi et ne fonctionne pas sur ipad.

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />

[EDIT 3]

iOS/Safari 8 Bêta 4: La fenêtre d'affichage de la balise meta minimal-ui mentionné dans EDIT 2 a été retirée par Apple dans cette version. Source WebKit Notes

Answer 2

HTML

 <head>
    <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
</head>
 

jQuery

Option 1:

 $('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');
 

Option 2:

 var deviceSpecific = {
    iPad: 'width=1165,user-scalable=no'
};
if(navigator.userAgent.match(/iPad/i){
    $('meta[name=viewport]').attr('content',deviceSpecific.iPad);
}
 

La deuxième option est un peu plus un dernier recours si vous trouvez une incohérence.

Answer 3

Pour Apple appareils est facile:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />

La première balise exécuter l'application web en mode plein écran lorsque vous l'ouvrez, par l'intermédiaire d'une icône de raccourci placé sur le iPhone/iPod/iPad écran d'accueil.

La deuxième balises fonctionne uniquement en combinaison avec la première. Les valeurs possibles sont: par défaut, le noir et le noir translucide.

La troisième balise bloque le site de la largeur à la taille standard (1.0) et ne permet pas de zoomer.

REMARQUE: comme les "apple-mobile" meta tags sont ignorés sur la non-appareils Apple et la 3ème balise est officielle en HTML5, vous pouvez utiliser tous ensemble.

Pour Android, vous n'avez pas une solution globale depuis pas tout le monde utilise la valeur par défaut d'android webbrowser. Voir en plein écran Web App pour Android

Voici quelques autres liens utiles:

Conseils pour iOS: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Tous les officiels et non officiels connus meta: https://gist.github.com/kevinSuttle/1997924

Answer 4

Android l'a corrigé depuis la version 4.4.2

 <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />