Ho questo codice:
<select>
<option value="c">Klassen</option>
<option value="t">Docenten</option>
<option value="r">Lokalen</option>
<option value="s">Leerlingen</option>
</select>
In esecuzione in un'app Web a schermo intero su iPhone.
Quando si seleziona qualcosa da questo elenco, l'iPhone ingrandisce l' selectelemento. E non riduce lo zoom dopo aver selezionato qualcosa.
Come posso impedirlo? O rimpicciolire?
Risposte:
Probabilmente è perché il browser sta tentando di ingrandire l'area poiché la dimensione del carattere è inferiore alla soglia, questo generalmente accade in iphone.
Dare un attributo metatag "user-scalable = no" impedirà all'utente di eseguire lo zoom altrove. Poiché il problema riguarda solo l'elemento selezionato , prova a utilizzare quanto segue nel tuo css, questo hack è originariamente utilizzato per 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;
}
$('<meta>', {name: 'viewport',content: 'user-scalable=no'}).appendTo('head');
scalabile dall'utente = no è ciò di cui hai bisogno, solo così c'è effettivamente una risposta definitiva a questa domanda
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
minimum-scale=1, che preserva anche la possibilità dell'utente di ingrandire.
Questo sembrava funzionare per il mio caso nell'affrontare questo problema:
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus, textarea:focus, input:focus {
font-size: 16px;
}
}
Suggerito qui da Christina Arasmo Beymer
iPhone ingrandirà leggermente i campi del modulo se il testo è impostato su meno di 16 pixel . Suggerirei di impostare il testo del campo del modulo mobile su 16 pixel e quindi sovrascrivere le dimensioni per il desktop.
Le risposte che dicono di disabilitare lo zoom non sono utili per gli utenti ipovedenti potrebbero comunque voler ingrandire i cellulari più piccoli.
Esempio:
# Mobile first
input, textarea, select {
font-size: 16px;
}
# Tablet upwards
@media (min-width: 768px) {
font-size: 14px;
}
Sono un po 'in ritardo per la festa, ma ho trovato una soluzione alternativa piuttosto ordinata che risolve questo problema solo con la manipolazione CSS. Nel mio caso non ho potuto modificare la dimensione del carattere per motivi di progettazione e non ho potuto disabilitare lo zoom.
Poiché l'iPhone ingrandirà leggermente i campi del modulo se il testo è impostato su meno di 16 pixel, possiamo indurre l'iPhone a pensare che la dimensione del carattere sia 16px e quindi trasformarla nella nostra dimensione.
Ad esempio, prendiamo l'esempio quando il nostro testo è 14px, quindi ingrandisce perché è più piccolo di 16px. Quindi possiamo trasformare la scala, secondo 0,875.
Nell'esempio seguente ho aggiunto il riempimento per mostrare come convertire di conseguenza altre proprietà.
.no-zoom {
font-size: 16px;
transform-origin: top left;
transform: scale(0.875); // 14px / 16px
padding: 4.57px; // 4px / 0.875
}
Spero possa essere d'aiuto!
Prova questo:
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 verrà attivato prima di onchange, quindi lo zoom sarà disabilitato nel momento in cui viene attivato onchange. Sulla funzione onchange, al termine, è possibile ripristinare la situazione iniziale.
Testato su un iPhone 5S
iOS ingrandisce la pagina per mostrare un campo di input più grande se la dimensione del carattere è inferiore a 16 px.
solo al clic di qualsiasi campo, esegue lo zoom della pagina. quindi, al clic, lo stiamo impostando come 16px e poi cambiato al valore predefinito
sotto lo snippet funziona bene per me e mirato ai dispositivi mobili,
@media screen and (max-width: 767px) {
select:active, input:active,textarea:active{
font-size: 16px;
}
}Non credo che tu possa fare nulla riguardo al comportamento da solo.
Una cosa che puoi provare è impedire del tutto lo zoom della pagina. Questo va bene se la tua pagina è progettata per il telefono.
<meta name="viewport" content="width=device-width" />
Un'altra cosa che potresti provare è usare un costrutto JavaScript invece dell'istruzione generica "select". Crea un div nascosto per mostrare il tuo menu, elabora i clic in javascript.
In bocca al lupo!
Come risposto qui: Disabilita lo zoom automatico nel tag "Testo" di input - Safari su iPhone
Puoi impedire a Safari di ingrandire automaticamente i campi di testo durante l'input dell'utente senza disabilitare la capacità dell'utente di pizzicare lo zoom. Basta aggiungere maximum-scale=1ma tralasciare l'attributo di scala utente suggerito in altre risposte.
È un'opzione utile se hai un modulo in un livello che "fluttua" se ingrandito, il che può causare lo spostamento di elementi importanti dell'interfaccia utente fuori dallo schermo.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Prova ad aggiungere questo CSS per disabilitare lo stile predefinito di Ios:
-webkit-appearance: none;
Questo funzionerà anche su altri elementi che ottengono uno stile speciale, come input [type = search].
Ho letto per alcune ore su questo e la soluzione migliore è questo jquery qui. Questo aiuta anche con l'opzione "scheda successiva" in Safari iOS. Ho anche degli input qui, ma sentiti libero di rimuoverli o aggiungerli come preferisci. Fondamentalmente il mousedown si attiva prima dell'evento focus e induce il browser a pensare ai suoi 16px. Inoltre, il focusout si attiverà nella funzione "scheda successiva" e ripeterà il processo.
$(function(){
$('input, select').on("mousedown focusout", function(){
$('input, select').css('font-size','16px');
});
$('input, select').on("focus", function(){
$('input, select').css('font-size','');
});
})