Page web complète et zoom désactivé meta tag pour tous les navigateurs mobiles
je veux que ma page Web soit plein écran et désactiver 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 zoomé à environ 125%.
si j'utilise l'étiquette
<meta name="viewport" content="width=max-device-width, user-scalable=no">
j'obtiens le résultat contraire. Donc ça marche sur Android mais ça ne marche pas sur iPad/iPhone.
12 réponses
malheureusement chaque navigateur a sa propre implémentation de la balise meta de viewport. Différentes combinaisons fonctionneront sur différents navigateurs.
Android 2.2 : la balise meta de viewport ne semble pas du tout supportée.
Android 2.3.x / 3.x : en paramétrant modulable par l'utilisateur=no vous désactivez vous-même la mise à l'échelle de la balise meta de viewport. C'est probablement la raison pour laquelle votre largeur option n'a aucun effet. Pour permettre au navigateur de mettre à l'échelle votre contenu , Vous avez besoin de mettre modulable par l'utilisateur=Oui , puis de désactiver zoom vous pouvez mettre l'échelle min et max à la même valeur de sorte qu'il ne peut pas rétrécir ou croître. 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 que 2.3.x sauf les échelles min et max ne sont plus respectées et si vous utilisez modulable par l'utilisateur=Oui l'utilisateur peut toujours zoomer, le paramétrer à " non " signifie que votre propre échelle est ignorée, c'est le problème auquel je fais face maintenant qui m'a amené à cette question... Vous ne pouvez pas désactiver zoom et échelle en même temps dans 4.x.
iOS/Safari (4.x / 5.x testé) : les échelles fonctionnent comme prévu, vous pouvez désactiver l'échelle avec modulable par l'utilisateur=0 (mots clés oui/non ne fonctionne pas dans 4.x). iOS / Safari n'a pas non plus la notion de target-densitydpi vous devez donc laisser cela pour éviter les erreurs. Vous n'avez pas besoin de min et max puisque vous pouvez désactiver le zoom de la manière attendue. N'utilisez que largeur ou vous rencontrerez le bug d'orientation iOS
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />
Chrome : échelles fonctionnent comme prévu comme ils le font dans iOS, min et max sont honorés 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 JS assez simples pour régler le contenu en conséquence après une certaine détection de base de navigateur/périphérique. Je sais que ce type de détection est mal vu mais dans ce cas, c'est presque inévitable parce que chaque vendeur est parti et a fait sa propre chose! Espérons que cela aide les gens à combattre le viewport, et si quelqu'un a une solution pour désactiver le zoom sur Android 4.x SANS l'utilisation de la fenêtre d'affichage, s'il vous plaît laissez-moi savoir.
[EDIT]
Android 4.x Chrome navigateur (qui je pense est pré-installé dans la plupart des pays): vous pouvez vous assurer que l'utilisateur ne peut pas zoomer et la page est plein écran. L'inconvénient: vous devez vous assurer que le contenu a une largeur fixe. Je ne l'ai pas testé sur les versions inférieures D'Android. Pour ce faire, voir l'exemple:
<meta name="viewport" content="width=620, user-scalable=no" />
[EDIT 2]
iOS / Safari 7.1 : depuis v7.1, Apple ont introduit un nouveau drapeau pour le meta tag viewport appelé minimal-ui . Pour aider avec les applications plein écran, cela cache la barre d'adresse et la barre d'outils du bas pour une expérience plein écran (pas tout à fait L'API Plein écran mais fermer et ne nécessite pas l'acceptation de l'utilisateur). Il est livré avec son juste part de bugs ainsi et ne fonctionne pas dans les iPads.
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />
[EDIT 3]
iOS/Safari 8 Beta 4 : la balise viewport meta minimal-ui mentionnée dans EDIT 2 a été supprimée par Apple dans cette version. Source-WebKit Notes
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);
}
Option deux étant un peu plus d'un dernier recours si vous trouvez incohérence.
pour Apple les 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 lancer l'application web en mode plein écran lorsque vous l'ouvrez via une icône de raccourci placée sur l'écran d'accueil iPhone/iPod/iPad.
la deuxième étiquette ne fonctionne qu'en conjonction avec la première. Les valeurs possibles sont: par défaut, noir et noir-translucide.
la troisième étiquette bloque la largeur du site à sa taille standard (1.0) et ne permet pas zoom.
NOTE: Comme les balises meta "apple-mobile" sont ignorées sur les appareils non Apple et que la 3ème balise est officielle en HTML5, vous pouvez les utiliser toutes 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 Fullscreen Web App for Android
Voici d'autres liens utiles:
conseils pour iOS: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript /
toute la méta officielle et non officielle connue: https://gist.github.com/kevinSuttle/1997924
J'ai un Samsung Galaxy Note 4 et j'utilise chrome comme navigateur. J'ai trouvé qu'il ignorait les méta tags de viewport, qu'il fonctionnait avec HandheldFriendly. J'ai fini avec un combo de métabalises. Ça marche pour moi sur Android et iOS.
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=YOUR_SITE_WIDTH">
Android l'a corrigé de 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" />
j'avais toutes sortes de problèmes avec cela et j'ai même commencé à construire un système de détection de navigateur pour livrer différentes étiquettes de viewport à différents navigateurs. Alors j'ai décidé d'essayer de simplifier ce que je faisais et tout a fonctionné. Réglez le viewport sur la largeur que vous voulez que votre site soit et partez tout fonctionne maintenant.
<meta name="viewport" content="width=1165 />
pour ce que cela vaut, voici ce que j'ai utilisé pour obtenir une page de contenu de 1024px largeur d'aller exactement plein écran sur mon Nexus 7 (Android 4.2.2) / Chrome, paysage seulement sans recourir à javascript*:
width=device-width, initial-scale=.94, minimum-scale=0.8, maximum-scale=1.2, user-scalable=no
(je pense que l'échelle de l'utilisateur=non nie réellement l'échelle min- & max). J'ai eu l' .94 par tâtonnement et erreur, pas par n'importe quelle sorte de calcul invoquant la densité du pixel de l'appareil ou quelque chose comme ça.
*c. à d. pour forcer le contenu width to match window -- j'ai utilisé js pour écrire conditionnellement le contenu meta de viewport.
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>
nous avons utilisé le Javascript suivant dans l'en-tête pour définir les balises meta:
<script>
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) {
document.write("<meta name='viewport' content='width=1165, user-scalable=no'>"); // or whichever meta tags make sense for your site
} else {
document.write("<meta name='viewport' content='width=max-device-width, user- scalable=no'>"); // again, which ever meta tags you need
}
</script>
vous pouvez ajouter des conditions supplémentaires et les définir pour vos besoins spécifiques.
la suggestion ci-dessous de Dan B a bien fonctionné pour moi, j'ai eu toutes sortes de problèmes en essayant d'obtenir mon site pour charger directement sur android, et cela a trié. Pour l'instant, de toute façon!
<meta name="viewport" content="width=YOUR_SITE_WIDTH"/>
Merci!
j'utilise ce code pour empêcher zoom dans iPhone et le problème a été résolu, mais un autre problème se pose; lorsque je clique sur le champ d'entrée toute la fenêtre saute vers le haut puis définit sa position à la normale, lorsque j'ai appuyé sur le bouton go même comportement se produit et Windows saute. je dois me débarrasser de jump pour que seule la fenêtre la redimensionne à l'emplacement normal.
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}