Le code:
<select>
<option value="1">Home</option>
<option value="2">About</option>
<option value="3">Services</option>
<option value="4">Contact</option>
</select>
Lorsque je touche select
, l'iPhone effectue un zoom avant sur cet élément (et ne fait pas un zoom arrière après la désélection).
Comment puis-je empêcher cela? Ou faire un zoom arrière? Je ne peux pas utiliser user-scalable=no
car j'ai réellement besoin de cette fonctionnalité. C'est pour iPhone, sélectionnez le menu.
UPDATE: Cette méthode ne fonctionne plus sous iOS 10.
Cela dépend de la fenêtre d'affichage, vous pouvez le désactiver de cette façon:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
ajoutez user-scalable=0
et cela devrait également fonctionner sur vos entrées.
Cela peut être évité en définissant font-size: 16px sur tous les champs de saisie.
Pour iOS, vous pouvez éviter de zoomer sur les éléments d’entrée en leur attribuant simplement une taille de police jugée suffisante par le système d’exploitation (> = 16 pixels), évitant ainsi le besoin de zoomer, par exemple:
input, select, textarea {
font-size: 16px;
}
C'est une solution également utilisée par différents frameworks et qui vous permet d'éviter l'utilisation d'une balise méta.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Ne fonctionne plus sur iOS10.0.1
font-size:16px
fonctionne
La réponse la plus votée pour définir la taille de la police ne fonctionne pas pour moi. En utilisant javascript pour identifier le client , ainsi que les balises méta dans les réponses fournies ici, nous pouvons empêcher le comportement de zoom de l’iPhone lors de la saisie tout en maintenant la fonctionnalité de zoom intacte.
$(document).ready(function ()
{
if (/iPhone/.test(navigator.userAgent) && !window.MSStream)
{
$(document).on("focus", "input, textarea, select", function()
{
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">');
});
$(document).on("blur", "input, textarea, select", function()
{
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');
});
}
});
Il semble que nous devions remplacer la balise méta par de nouvelles valeurs sur l'événement blur. Le simple fait de supprimer cette balise ne semble pas déclencher de mise à jour du comportement.
Notez que l'interface utilisateur est toujours en train d'initialiser le zoom, mais elle revient rapidement en arrière. Je pense que cela est acceptable et que les utilisateurs d'iPhone doivent déjà être habitués au fait que le navigateur effectue de toute façon un zoom dynamique dans les scénarios applicables.
Cela pourrait être utile de regarder:
Désactiver le zoom automatique dans la balise d'entrée "Texte" - Safari sur iPhone
En gros, vous devez capturer l'événement de toucher un élément de formulaire, puis n'exécutez pas l'action par défaut du zoom avant sur iOS, tout en lui permettant de zoomer pour le reste de la page.
Modifier:
Le lien mentionne,
2) Vous pouvez modifier dynamiquement la balise META Viewport en utilisant javascript (voir Activer/désactiver le zoom sur le safari iPhone avec Javascript?)
Élaborer:
Et si vous ne pouvez pas modifier la balise lorsque vous cliquez sur un élément de formulaire, mettez un div qui imite l'élément de formulaire et qui, lorsque vous appuyez dessus, modifie la balise puis appelle l'entrée.
Le réglage de la taille de la police fonctionne parfaitement pour les éléments en entrée, mais pas pour les éléments sélectionnés pour moi. Pour les balises select, je dois désactiver activement le zoom de la fenêtre d'affichage lorsque l'utilisateur commence à interagir avec l'élément select, puis le réactiver à la fin.
//the mousedown event seems to be the one that does the trick, versus 'focus', because focus fires after the zoom already happens.
$('select').mousedown(function(){
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');
})
$('select').focusout(function(){
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
})
Je viens de trouver une solution simple si vous utilisez Bootstrap:
Comme mentionné dans w3s: Vous pouvez rapidement dimensionner les étiquettes et les contrôles de formulaire dans un formulaire horizontal en ajoutant .form-group-lg à l'élément.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="control-label">Large Label</label>
<div>
<input class="form-control" type="text">
</div>
</div>
Voir le deuxième exemple sur cette page: http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp
Testé dans Safari et Chrome sur un iPhone SE et cela fonctionne comme un charme!
Alors voici la solution finale qui fonctionne bien pour moi.
Écran @média et (-webkit-min-device-pixel-ratio: 0) { sélectionner, textarea, contribution { taille de police: 16px! important; } }
voici la solution jQuery fonctionne bien pour moi.
device_type = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
if(device_type === "touchstart" ){
$('head').append('<style type="text/css">input, select, textarea {font-size: 16px;}</style>');
}
Utilisez maximum-scale=1
au lieu de user-scalable=no
pour éviter le problème de zoom de formulaire sans compromettre la capacité de l'utilisateur à effectuer un zoom avant.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">