Verhindern Sie, dass das iPhone in der Web-App auf "Auswählen" zoomt

Ich habe diesen Code:

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

Laufen in einer Vollbild-Web-App auf dem iPhone.

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

Wie kann ich das verhindern? Oder wieder herauszoomen?

Dies liegt wahrscheinlich daran, dass der Browser versucht, den Bereich zu vergrößern, da die Schriftgröße unter dem Schwellenwert liegt. Dies geschieht im Allgemeinen auf dem iPhone.

Wenn Sie ein Metatag-Attribut "user-scalable = no" angeben, kann der Benutzer nicht an anderer Stelle zoomen. Da das Problem nur bei einem ausgewählten Element liegt, versuchen Sie Folgendes in Ihrem CSS zu verwenden. 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 Auswahl im iPhone

Benutzerskalierbar = Nein ist das, was Sie brauchen, nur damit es tatsächlich eine endgültige Antwort auf diese Frage gibt

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

Dies schien für meinen Fall bei der Lösung dieses Problems zu funktionieren:

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

Empfohlene hier von Christina Arasmo Beymer

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

Die Antworten zum Deaktivieren des Zooms sind für sehbehinderte Benutzer nicht hilfreich. Sie möchten möglicherweise immer noch auf kleinere Handys zoomen.

Beispiel:

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

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

Ich bin etwas spät zur Party, aber ich habe eine ziemlich gute Lösung gefunden, die dieses Problem nur durch CSS-Manipulation löst. In meinem Fall konnte ich die Schriftgröße aus Designgründen nicht ändern und das Zoomen nicht deaktivieren.

Da das iPhone die Formularfelder leicht zoomt, wenn der Text auf weniger als 16 Pixel eingestellt ist, können wir das iPhone dazu verleiten, zu glauben, dass die Schriftgröße 16 Pixel beträgt, und sie dann in unsere Größe umwandeln.

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

Im folgenden Beispiel habe ich die Auffüllung 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!

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 Onchange ausgelöst, sodass der Zoom zum Zeitpunkt des Onchange deaktiviert wird. Mit der Funktion onchange können Sie am Ende die Ausgangssituation wiederherstellen.

Getestet auf einem iPhone 5S

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

Nur Wenn Sie auf ein Feld klicken, wird die Seite vergrößert. Beim Klicken machen wir es als 16px und ändern es dann auf den Standardwert

Das folgende Snippet funktioniert gut für mich und ist für mobile Geräte gedacht.

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

Stellen Sie alle 'Select'-Schriftgrößen auf 16px ein

Wählen Sie {Schriftgröße: 16px; }}

Ich glaube nicht, dass Sie isoliert nichts gegen das Verhalten unternehmen können.

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

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

Sie können auch versuchen, ein JavaScript-Konstrukt anstelle der generischen "select" -Anweisung zu verwenden. Erstellen Sie ein verstecktes Div, um Ihr Menü anzuzeigen, und verarbeiten Sie die Klicks in Javascript.

Viel Glück!

Wie hier beantwortet: Deaktivieren Sie die automatische Vergrößerung der Eingabe "Text" -Tag - Safari auf dem iPhone

Sie können verhindern, dass Safari Textfelder während der Benutzereingabe automatisch vergrößert, ohne die Fähigkeit des Benutzers zu deaktivieren, das Zoomen zu beschränken. Fügen Sie einfach maximum-scale=1das in anderen Antworten vorgeschlagene Attribut für die Benutzerskala hinzu , lassen Sie es jedoch weg.

Es ist eine lohnende Option, wenn Sie ein Formular in einer Ebene haben, das beim Zoomen „herumschwebt“, was dazu führen kann, dass wichtige Elemente der Benutzeroberfläche vom Bildschirm verschoben werden.

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

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

-webkit-appearance: none;

Dies funktioniert auch bei anderen Elementen, die ein spezielles Styling erhalten, wie z. B. input [type = search].

Ich habe ein paar Stunden darüber gelesen und die beste Lösung ist diese Frage hier. Dies hilft auch bei der Option "Nächster Tab" in iOS Safari. Ich habe auch hier Eingaben, kann diese aber nach Belieben entfernen oder hinzufügen. Grundsätzlich wird der Mousedown vor dem Fokusereignis ausgelöst und bringt den Browser dazu, an seine 16px zu denken. Außerdem wird das Focusout auf der Funktion "Nächste Registerkarte" 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','');
    });
})