web-dev-qa-db-fra.com

Empêcher l'iPhone de zoomer sur `select` dans l'application Web

J'ai ce code:

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

Exécution dans une application Web plein écran sur iPhone.

Lorsque vous sélectionnez un élément de cette liste, l'iPhone effectue un zoom sur l'élément select-. Et ne fait pas un zoom arrière après avoir sélectionné quelque chose.

Comment puis-je empêcher cela? Ou faire un zoom arrière?

javascriptcsshtml5iphone-web-app
65
Stijn Martens

C'est probablement parce que le navigateur essaie de zoomer sur la zone car la taille de la police est inférieure au seuil, cela se produit généralement sur iphone.

Donner un attribut de métabalise "user-scalable = no" empêchera l'utilisateur de zoomer ailleurs. Comme le problème ne concerne que l'élément select, essayez ce qui suit dans votre css, ce hack est utilisé à l'origine pour jquery mobile.

HTML:

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

CSS:

select{
font-size: 50px;
}

src: désélectionner après avoir sélectionné dans iphone

85
Sasi Dhar

user-scalable = no est ce dont vous avez besoin, il y a donc une réponse définitive à cette question

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

Cela a semblé fonctionner pour mon cas pour résoudre ce problème:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus, textarea:focus, input:focus {
        font-size: 16px;
    }
}

Suggéré ici par Christina Arasmo Beymer

31
Triptoph

L'iPhone zoomera légèrement sur les champs de formulaire si le texte est réglé sur moins de 16 pixels . Je suggère de définir le texte du champ de formulaire mobile sur 16 pixels, puis de redéfinir la taille pour le bureau.

Les réponses indiquant de désactiver le zoom ne sont d'aucune utilité pour les utilisateurs malvoyants. Ils peuvent néanmoins souhaiter effectuer un zoom sur des mobiles plus petits.

Exemple:

# Mobile first
input, textarea, select {
  font-size: 16px;
}

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}
21
martinedwards

Je suis un peu en retard pour la fête, mais j’ai trouvé une solution de contournement assez soignée qui résout ce problème uniquement avec la manipulation de CSS. Dans mon cas, je ne pouvais pas changer la taille de la police pour des raisons de conception et je ne pouvais pas désactiver le zoom.

Étant donné que l'iPhone zoomera légèrement sur les champs de formulaire si le texte est défini sur moins de 16 pixels, nous pouvons faire croire à l'iPhone que la taille de la police est de 16 pixels, puis le transformer à notre taille.

Par exemple, prenons l'exemple lorsque notre texte est de 14 pixels, il est donc zoomé car il est inférieur à 16 pixels. Par conséquent, nous pouvons transformer l'échelle, selon 0.875.

Dans l'exemple suivant, j'ai ajouté le remplissage pour montrer comment convertir d'autres propriétés en conséquence.

.no-zoom {
    font-size: 16px;
    transform-Origin: top left;
    transform: scale(0.875);            //  14px / 16px
    padding: 4.57px;                    // 4px / 0.875
}

J'espère que ça aide!

2
Layor Zee

Essaye ça:

function DisablePinchZoom() 
{
    $('meta[name=viewport]').attr("content", "");
    $('meta[name=viewport]').attr("content", "width=yourwidth, user-scalable=no");
}

function myFunction() 
{
    $('meta[name=viewport]').attr("content", "width=1047, user-scalable=yes");
}


<select id="cmbYo" onchange="javascript: myFunction();" onclick="javascript: DisablePinchZoom();">
</select>

DisablePinchZoom sera déclenché avant onchange, ainsi le zoom sera désactivé au moment du déclenchement de onchange . Sur la fonction onchange, vous pourrez restaurer la situation initiale à la fin.

Testé sur un iPhone 5S

2
Dario Brizio

Je ne pense pas que vous ne pouvez rien faire contre le comportement de manière isolée.

Une chose que vous pouvez essayer est de garder la page de zoomer du tout. C'est bien si votre page est conçue pour le téléphone.

<meta name="viewport" content="width=device-width" />

Une autre chose que vous pourriez essayer est d'utiliser une construction JavaScript au lieu de l'instruction générique "select". Créez un div masqué pour afficher votre menu, traitez les clics en javascript.

Bonne chance!

1
Vineel Shah

iOS effectue un zoom sur la page pour afficher un champ de saisie plus grand si sa taille de police est inférieure à 16 pixels.

uniquement En cliquant sur n'importe quel champ, il fait un zoom sur la page. alors cliquez sur, nous le faisons en 16px et ensuite changé à la valeur par défaut

l'extrait ci-dessous me convient parfaitement et est destiné aux appareils mobiles,

@media screen and (max-width: 767px) {
 select:active, input:active,textarea:active{
        font-size: 16px;
 }
}

1
nand-63

Je lis depuis quelques heures à ce sujet et la meilleure solution est la suivante: Cela aide également avec l'option "onglet suivant" dans iOS Safari. J'ai des entrées ici aussi, mais n'hésitez pas à les supprimer ou à les ajouter à votre guise. Fondamentalement, le mousedown se déclenche avant l'événement de focus et amène le navigateur à penser en 16px. De plus, la focalisation se déclenchera sur la fonction "prochain onglet" et répétera le processus.

$(function(){
    $('input, select').on("mousedown focusout", function(){
        $('input, select').css('font-size','16px');
    });
    $('input, select').on("focus", function(){
        $('input, select').css('font-size','');
    });
})
0
Nimrod5000

Essayez d'ajouter ce CSS pour désactiver le style par défaut d'Ios:

-webkit-appearance: none;

Cela fonctionnera également sur d'autres éléments ayant un style spécial, comme input [type = search].

0
Abdul Sheikh

Comme répondu ici: Désactiver le zoom automatique en entrée Balise "Texte" - Safari sur iPhone

Vous pouvez empêcher Safari d’agrandir automatiquement les champs de texte lors de la saisie utilisateur sans que ne désactive la possibilité pour l’utilisateur d’agrandir le zoom. Ajoutez simplement maximum-scale=1, mais laissez de côté l’attribut d’échelle utilisateur suggéré dans les autres réponses.

C'est une option intéressante si vous avez un formulaire dans une couche qui «flotte» si vous effectuez un zoom, ce qui peut entraîner le déplacement d'éléments importants de l'interface utilisateur hors de l'écran.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

0
daxmacrog

Définir la taille de police 'select' sur 16px

sélectionnez {font-size: 16px; }

0
nasty