webentwicklung-frage-antwort-db.com.de

Verhindern Sie, dass das iPhone bei "select" in der Web-App zoomt

Ich habe diesen Code erhalten:

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

Läuft in einer Vollbild-Web-App auf dem iPhone.

Wenn Sie etwas aus dieser Liste auswählen, vergrößert das iPhone das select- Element. Und zoomt nicht zurück, nachdem Sie etwas ausgewählt haben.

Wie kann ich das verhindern? Oder weiter herauszoomen?

65
Stijn Martens

Dies ist wahrscheinlich darauf zurückzuführen, dass der Browser versucht, den Bereich zu vergrößern, da die Schriftgröße unter dem Schwellenwert liegt. Dies geschieht im Allgemeinen im iPhone.

Wenn Sie ein Metatag-Attribut "user-scalable = no" angeben, wird der Benutzer das Zoomen an anderer Stelle einschränken. Da das Problem nur mit dem Element select besteht, versuchen Sie Folgendes in Ihrer CSS-Datei. Dieser Hack wird ursprünglich für jquery mobile verwendet.

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: unzoom nach der Auswahl im iphone

85
Sasi Dhar

user-scalable = no ist das was Sie brauchen, nur um diese Frage zu beantworten

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

Dies schien für meinen Fall bei der Behandlung dieses Problems zu funktionieren:

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

Vorgeschlagen hier von Christina Arasmo Beymer

31
Triptoph

Das iPhone zoomt Felder leicht aus, wenn der Text auf weniger als 16 Pixel eingestellt ist . Ich würde vorschlagen, den Text des mobilen Formularfelds auf 16 Pixel festzulegen und die Größe dann für den Desktop wieder zu überschreiben.

Die Antworten, wonach das Zoomen deaktiviert werden sollte, sind für sehbehinderte Benutzer nicht hilfreich.

Beispiel:

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

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

Ich bin ein bisschen zu spät zur Party, aber ich habe eine ziemlich ordentliche Lösung gefunden, die dieses Problem nur mit CSS-Manipulationen löst. In meinem Fall konnte ich die Schriftgröße aus Designgründen nicht ändern und auch das Zoomen nicht deaktivieren.

Da das iPhone Formularfelder leicht vergrößert, wenn der Text auf weniger als 16 Pixel eingestellt ist, können wir das iPhone täuschen, um zu denken, dass die Schriftgröße 16 Pixel beträgt, und dann in unsere Größe umwandeln.

Nehmen wir zum Beispiel das Beispiel, wenn unser Text 14px ist, also zoomt er, weil er kleiner als 16px ist. Daher können wir die Skala nach 0,875 transformieren.

Im folgenden Beispiel wurde der Abstand hinzugefügt, um zu zeigen, wie andere Eigenschaften entsprechend konvertiert werden.

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

Ich hoffe, es hilft!

2
Layor Zee

Versuche dies:

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 wird vor dem Wechsel ausgelöst, so dass der Zoom zum Zeitpunkt des Wechsels deaktiviert wird. Bei der Funktion "Ändern" können Sie am Ende die Ausgangssituation wiederherstellen.

Getestet auf einem iPhone 5S

2
Dario Brizio

Ich glaube nicht, dass Sie das isolierte Verhalten nicht ändern können.

Sie können versuchen, die Seite überhaupt nicht zu zoomen. Dies ist gut, wenn Ihre Seite für das Telefon ausgelegt ist.

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

Eine andere Sache, die Sie versuchen könnten, ist die Verwendung eines JavaScript-Konstrukts anstelle der generischen "select" -Anweisung. Erstellen Sie ein verstecktes Div, um Ihr Menü anzuzeigen, und bearbeiten Sie die Klicks in Javascript.

Viel Glück!

1
Vineel Shah

iOS zoomt die Seite, um ein größeres Eingabefeld anzuzeigen, wenn die Schriftgröße weniger als 16 Pixel beträgt.

only Beim Klick auf ein beliebiges Feld wird die Seite gezoomt. so auf klick, wir machen es als 16px und dann auf den voreingestellten Wert geändert

das folgende Snippet funktioniert gut für mich und richtet sich an mobile Geräte.

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

1
nand-63

Ich habe ein paar Stunden darüber gelesen und die beste Lösung ist diese Abfrage hier. Dies hilft auch bei der Option "Nächster Tab" in iOS Safari. Ich habe auch hier Eingaben, kann diese aber jederzeit entfernen oder hinzufügen. Grundsätzlich wird der Mausklick vor dem Fokusereignis ausgelöst und der Browser wird veranlasst, seine 16px zu überdenken. Außerdem wird das Focusout bei der Funktion "Nächster Reiter" ausgelöst und der Vorgang wiederholt.

$(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

Fügen Sie dieses CSS hinzu, um das Standard-Styling von Ios zu deaktivieren:

-webkit-appearance: none;

Dies funktioniert auch bei anderen Elementen, die einen besonderen Stil erhalten, wie Eingabe [Typ = Suche].

0
Abdul Sheikh

Wie hier beantwortet: Deaktivieren Sie den automatischen Zoom in der Eingabe "Text" - Safari auf dem iPhone

Sie können verhindern, dass Safari während der Benutzereingabe automatisch in Textfelder zoomt, ohne dass die Möglichkeit des Benutzers, den Zoom zu fixieren, deaktiviert wird. Fügen Sie einfach maximum-scale=1 hinzu, lassen Sie jedoch das in den anderen Antworten vorgeschlagene Attribut für die Benutzer-Skala aus.

Es ist eine lohnende Option, wenn Sie ein Formular in einer Ebene haben, das beim Zoomen umherfließt, was dazu führen kann, dass wichtige Elemente der Benutzeroberfläche den Bildschirm verlassen.

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

0
daxmacrog

Stellen Sie alle ausgewählten Schriftgrößen auf 16px ein

wähle {font-size: 16px; }

0
nasty