Page complète et balise méta désactivée de la vue zoom pour tous les navigateurs
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.
Malheureusement, chaque navigateur a sa propre implémentation de la balise méta viewport. Différentes combinaisons fonctionneront sur différents navigateurs.
Android 2.2: la balise méta de la fenêtre d'affichage ne semble pas du tout être prise en charge.
Android 2.3.x/3.x: en définissant user-scalable = no, vous désactivez également la mise à l'échelle de la balise méta de la fenêtre de visualisation. C'est probablement pourquoi votre option de largeur n'a aucun effet. Pour permettre au navigateur de redimensionner votre contenu, vous devez définir user-scalable = yes. Pour désactiver le zoom, vous pouvez définir la même valeur pour les échelles min et max afin qu’elle ne puisse pas être réduite ou agrandie. Jouez avec la balance initiale jusqu'à ce que votre site soit bien ajusté.
<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: la même règle s'applique en tant que 2.3.x, sauf que les échelles min et max ne sont plus respectées et si vous utilisez user-scalable = yes l'utilisateur peut toujours zoomer en le réglant sur 'non 'signifie que votre propre échelle est ignorée, c’est le problème auquel je suis confronté qui m’a amené à cette question ... Vous ne pouvez pas sembler désactiver le zoom et l’échelle en même temps dans la version 4.x.
iOS/Safari (4.x/5.x testés): les échelles fonctionnent comme prévu, vous pouvez désactiver la mise à l'échelle avec user-scalable = 0 (les mots clés yes/no ne fonctionnent pas dans 4.x ). De plus, iOS/Safari n'a pas de concept de target-densitdpi, vous devez donc laisser cela de côté pour éviter les erreurs. Vous n'avez pas besoin de min et max car vous pouvez désactiver le zoom de la manière attendue. Utilisez uniquement width ou vous rencontrerez le bug d'orientation iOS
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />
Chrome: les échelles fonctionnent comme prévu dans iOS, les min et max étant respectés, 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 un JS assez simple pour définir le contenu en conséquence après une détection de base du navigateur/du périphérique. Je sais que ce type de détection est mal vu, mais dans ce cas, il est presque inévitable, car chaque fournisseur est parti et a fait sa propre chose! J'espère que cela aidera les gens à lutter contre la fenêtre d'affichage. Si quelqu'un dispose d'une solution pour désactiver le zoom dans Android 4.x SANS utiliser la fenêtre d'affichage, veuillez me le faire savoir.
[MODIFIER]
Navigateur Google Chrome Android (qui, à mon avis, est préinstallé dans la plupart des pays): vous pouvez vous assurer que l'utilisateur ne peut pas effectuer de zoom et que la page est en plein écran. L'inconvénient: vous devez vous assurer que le contenu a une largeur fixe. Je n'ai pas testé cela 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 la version 7.1, Apple a introduit un nouvel indicateur pour la balise méta de la fenêtre d'affichage nommée minimal-ui. Pour vous aider avec les applications en plein écran, cela masque la barre d’adresse et la barre d’outils inférieure pour une expérience en plein écran (API pas vraiment Plein écran mais fermée et ne nécessite pas l’acceptation de l’utilisateur). Il est livré avec son part équitable des bogues également } 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 méta de la fenêtre de visualisation minimal-ui mentionnée dans EDIT 2 a maintenant été supprimée par Apple dans cette version. Source - Notes WebKit
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.
Utilisez simplement:
<meta name="HandheldFriendly" content="True" />
Fonctionne bien sur mon Samsung Note II et HTC Desire.
Pour les appareils Apple, rien de plus simple:
<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écute l'application Web en mode plein écran lorsque vous l'ouvrez via une icône de raccourci située sur l'écran d'accueil de l'iPhone/iPod/iPad.
La deuxième balise ne fonctionne que conjointement avec la première. Les valeurs possibles sont: default, black et black-translucent.
La troisième balise bloque la largeur du site à sa taille standard (1.0) et ne permet pas le zoom.
REMARQUE: étant donné que les balises méta "Apple-mobile" sont ignorées sur les appareils non Apple et que la 3ème balise est officielle en HTML5, vous pouvez toutes les utiliser ensemble.
Pour Android, vous n'avez pas de solution globale, car tout le monde n'utilise pas le navigateur Web Android par défaut. Voir Application Web plein écran pour Android
Voici quelques autres liens utiles:
Conseils pour iOS: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
Toutes les méta connues et officielles: https://Gist.github.com/kevinSuttle/1997924
J'ai un Samsung Galaxy Note 4 et j'utilise le chrome comme navigateur. J'ai constaté qu'il ignorait les balises méta de la fenêtre d'affichage et que cela fonctionnait avec HandheldFriendly. Je me suis retrouvé avec un combo de balises méta. Fonctionne 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é 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" />
Nous avons utilisé le code 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.
J'utilise ce code pour empêcher le zoom sur l'iPhone et le problème a été résolu, mais un autre problème se pose. lorsque je clique sur le champ de saisie, toute la fenêtre se soulève, puis se positionne sur la position normale. Je dois me débarrasser du saut afin que seule la fenêtre le 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" />');
}
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>
Pour ce que cela vaut, voici ce que j’avais utilisé pour obtenir une page de contenu d’une largeur de 1024px qui passe exactement en plein écran sur mon Nexus 7 (Android 4.2.2)/Chrome, paysage uniquement sans recourir à javascript *:
width=device-width, initial-scale=.94, minimum-scale=0.8, maximum-scale=1.2, user-scalable=no
(Je pense que l'utilisateur-scalable = no nie en réalité l'échelle min et max). J'ai obtenu la valeur .94 par essais et erreurs, et non par aucune sorte de calcul invoquant la densité de pixels de périphérique ou quelque chose du genre.
*c'est à dire. pour forcer la largeur du contenu à correspondre à la fenêtre - j’ai utilisé js pour écrire conditionnellement le méta-contenu de viewport.
J'avais toutes sortes de problèmes avec cela et j'ai même commencé à mettre en place un système de détection de navigateur permettant de fournir différents tags de viewport à différents navigateurs. Puis j'ai décidé d'essayer de simplifier ce que je faisais et tout a fonctionné. Définissez la fenêtre d'affichage sur la largeur souhaitée pour votre site et éloignez-vous, tout fonctionne maintenant.
<meta name="viewport" content="width=1165 />
La suggestion ci-dessous de Dan B a très bien fonctionné pour moi. J'ai eu toutes sortes de problèmes pour essayer de charger mon site directement sur Android, et tout a été réglé. Pour l'instant quand même!
<meta name="viewport" content="width=YOUR_SITE_WIDTH"/>
Merci!