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

84

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?

Seymar
quelle

Antworten:

106

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

Sasi Dhar
quelle
19
Wenn der Text sichtbar ist (wie in meinem Fall), scheinen 16 Pixel das Minimum zu sein, bevor der Zoom aktiviert wird.
Marlon Creative
5
Um es klarer zu machen, wird diese Zeile die automatische Skalierung verhindern:$('<meta>', {name: 'viewport',content: 'user-scalable=no'}).appendTo('head');
Abbas
11
Seit wann ist der Text in einem ausgewählten Element versteckt? "Bringt keine Layoutprobleme"
Bill
1
@ Billy Ich möchte sagen, wenn die Schriftgröße einen Wert von 50px hat, sieht sie auf anderen HTML-Elementen seltsam aus als auf einem Dropdown-Menü, das ich als Layout-Problem bezeichnet habe.
Sasi Dhar
1
Wenn Sie jedoch eine Benutzer-Skalierbarkeit aus Gründen der Zugänglichkeit oder aus anderen Gründen zulassen müssen, lesen Sie die Antwort unter stackoverflow.com/questions/6483425/…
gota
52

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">
sciritai
quelle
4
Tatsächlich sollte das Hinzufügen von Breite = Gerätebreite, Anfangsskala = 1,0, Maximalskala = 1,0 ausreichen. Ich glaube nicht, dass Sie eine Benutzerskalierbarkeit mit maximaler Skalierung benötigen.
Dan Smart
1
@DanSmart, zumindest in meinem Fall (und ich weiß nicht, was es auszeichnet) war die Min / Max-Skalierung nicht genug - das Hinzufügen von benutzerskalierbar = Nein hat keinen Unterschied gemacht.
Blumenkrone
8
Dies fühlt sich wie ein sehr hartnäckiger Ansatz an - ich empfehle die Verwendung von User-Scalable = No mit Vorsicht. Von Dev.Opera : "Es ist auch möglich, das Zoomen vollständig auszuschalten. Beachten Sie jedoch, dass das Zoomen eine wichtige Barrierefreiheitsfunktion ist, die von vielen Personen verwendet wird. Das Ausschalten sollte daher nur erfolgen, wenn dies wirklich erforderlich ist, z bestimmte Arten von Spielen und Anwendungen. "
Charlie Stanard
3
Benutzerskalierbar wird ab iOS 10 ignoriert.
nickdnk
1
Wenn Ihre Schrift größer als 16 Pixel ist, kann der Browser beim Fokussieren einer Eingabe verkleinern. Für mich musste ich nur hinzufügen minimum-scale=1, wodurch auch die Möglichkeit des Benutzers zum Zoomen erhalten bleibt.
Micros
33

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

Triptoph
quelle
2
In meinem Fall IOS 7x war die alte Benutzerskalierbarkeit nicht genug. Das obige hat den Trick gemacht, danke für das Teilen.
landete am
26

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;
}
martinedwards
quelle
Das ist gut! Aber was ist, wenn mein Text die gesamte Breite des Auswahlfelds überschreitet? Was kann ich in diesem Fall tun?
Gota
Wenn Ihre Startoptionsnachricht passt, sollte dies ausreichen. Sobald sie eine Option ausgewählt haben, werden sie sich wahrscheinlich daran erinnern, was sie war, auch wenn sie leicht abgeschnitten sind. Aber ja, eher ein Problem, wenn es heißt "Bitte wählen Sie eine Co ..."
martinedwards
Diese Antwort funktioniert und scheint die am wenigsten aufdringliche Methode zu bieten. Vielen Dank!
DeBraid
5

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!

Layor Zee
quelle
Es ist ein böser, aber auch cleverer Hack und ich mag keine Hacks ... aber in diesem Fall ist es die beste Antwort auf dieser Seite und es gibt keine Alternative, wenn Sie den Zoom stoppen müssen und das Design trotzdem so lassen möchten, wie es ist . Danke vielmals! :)
roNn23
2

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

Dario Brizio
quelle
2

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;
 }
}

nand-63
quelle
1

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

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

böse
quelle
0

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!

Vineel Shah
quelle
0

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

Daxmacrog
quelle
0

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].

Abdul Sheikh
quelle
0

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','');
    });
})
Nimrod5000
quelle