web-dev-qa-db-fra.com

Empêcher l'iPhone de zoomer?

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.

iphonehtmlcssioshtml-select
41
Atadj

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.

64
Andrea Turri

Cela peut être évité en définissant font-size: 16px sur tous les champs de saisie.

69
Supra

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.

18
codingmechanic
<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

3
atorgfr

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. 

3
Alex

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:

  1. La méta-balise Viewport est définie pour autoriser le zoom
  2. L'utilisateur appuie sur l'élément de formulaire et modifie la balise méta pour désactiver le zoom
  3. En appuyant sur done, la fenêtre est modifiée pour permettre le zoom

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.

3
Charlie

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">' );
})
2
gregkerzhner

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!

0
Hugo Lauzon

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; 
 } 
 }
0
Adeel Malik

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>');
}
0
jalalBK

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">

0
daxmacrog