webentwicklung-frage-antwort-db.com.de

Verhindern, dass das iPhone das Formular vergrößert?

Der Code:

<select>
    <option value="1">Home</option>
    <option value="2">About</option>
    <option value="3">Services</option>
    <option value="4">Contact</option>
</select>

Wenn ich auf select tippe, vergrößert das iPhone dieses Element (und verkleinert es nach dem Abwählen nicht).

Wie kann ich das verhindern? Oder weiter herauszoomen? Ich kann user-scalable=no nicht verwenden, da ich diese Funktionalität tatsächlich benötige. Es ist für iPhone, Menü auswählen.

41
Atadj

UPDATE: Diese Methode funktioniert nicht mehr unter iOS 10.


Es hängt vom Viewport ab, Sie können es auf folgende Weise deaktivieren:

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

add user-scalable=0 und es sollte auch bei Ihren Eingaben funktionieren.

64
Andrea Turri

Dies kann durch Festlegen der Schriftgröße: 16px für alle Eingabefelder verhindert werden.

69
Supra

Bei iOS können Sie das Zoomen von Eingabeelementen vermeiden, indem Sie ihnen einfach eine Schriftgröße zuweisen, die vom Betriebssystem als ausreichend angesehen wird (> = 16px). So müssen Sie nicht zoomen, z. B .:

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

Diese Lösung wird auch von verschiedenen Frameworks verwendet und ermöglicht es Ihnen, die Verwendung eines Meta-Tags zu vermeiden.

18
codingmechanic
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

Funktioniert nicht mehr unter iOS10.0.1

font-size:16px funktioniert

3
atorgfr

Die am meisten gewählte Antwort zum Einstellen der Schriftgröße funktioniert für mich nicht. Indem Sie javascript verwenden, um den Client zusammen mit den Meta-Tags in den Antworten zu identifizieren, können wir das Zoom-Verhalten des iPhone beim Eingabefokus verhindern, während die Zoom-Funktion andernfalls erhalten bleibt.

$(document).ready(function ()
{
    if (/iPhone/.test(navigator.userAgent) && !window.MSStream)
    {
        $(document).on("focus", "input, textarea, select", function()
        {
            $('meta[name=viewport]').remove();
            $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">');
        });

        $(document).on("blur", "input, textarea, select", function()
        {
            $('meta[name=viewport]').remove();
            $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');
        });
    }
});

Es scheint, als müssten wir das Meta-Tag durch neue Werte für das Blur-Ereignis ersetzen, nur wenn es entfernt wird, scheint es kein aktualisiertes Verhalten auszulösen.

Beachten Sie, dass die Benutzeroberfläche den Zoom zwar immer noch initialisiert, jedoch schnell wieder herauszoomt. Ich glaube, das ist akzeptabel, und iPhone-Benutzer müssen bereits daran gewöhnt sein, dass der Browser in bestimmten Szenarien sowieso dynamisches Zoomen hat. 

3
Alex

Dies kann hilfreich sein, wenn Sie Folgendes betrachten:

Deaktivieren Sie den automatischen Zoom in der Eingabe "Text" - Safari auf dem iPhone

Sie müssen im Wesentlichen das Ereignis erfassen, in dem Sie auf ein Formularelement tippen, und dann nicht die standardmäßige iOS-Aktion ausführen, in die Sie hineinzoomen, sondern den Rest der Seite vergrößern können.

Bearbeiten:

Der Link erwähnt,

2) Sie können den META-Viewport-Tag mithilfe von JavaScript .__ dynamisch ändern. (Siehe Zoom auf iPhone-Safari mit Javascript aktivieren/deaktivieren?)

Um auszuarbeiten:

  1. Das Viewport-Meta-Tag ermöglicht das Zoomen
  2. Der Benutzer tippt auf ein Formularelement und ändert das Meta-Tag, um das Zoomen zu deaktivieren
  3. Nach dem Drücken von wird das Ansichtsfenster geändert, um das Zoomen zu ermöglichen

Wenn Sie das Tag nicht ändern können, wenn Sie auf ein Formularelement klicken, setzen Sie ein div, das das Formularelement nachahmt. Wenn Sie es drücken, ändert es das Tag und ruft die Eingabe auf.

3
Charlie

Das Einstellen der Schriftgröße funktioniert perfekt für Eingabeelemente, nicht jedoch für ausgewählte Elemente. Bei select-Tags muss der Viewport-Zoom aktiv deaktiviert werden, wenn der Benutzer mit dem select-Element zu interagieren beginnt, und es am Ende wieder aktivieren kann. 

//the mousedown event seems to be the one that does the trick, versus 'focus', because focus fires after the zoom already happens.
$('select').mousedown(function(){
  $('meta[name=viewport]').remove();
  $('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');
})

$('select').focusout(function(){
  $('meta[name=viewport]').remove();
  $('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
})
2
gregkerzhner

Habe gerade ein einfaches Update gefunden, wenn Sie Bootstrap verwenden:

Wie in w3s erwähnt: Sie können die Größe von Beschriftungen und Formularsteuerelementen innerhalb eines horizontalen Formulars schnell anpassen, indem Sie dem Element .form-group-lg hinzufügen.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="control-label">Large Label</label>
    <div>
      <input class="form-control" type="text">
    </div>
  </div>

Siehe zweites Beispiel auf dieser Seite: http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp

Getestet in Safari und Chrome auf einem iPhone SE und es funktioniert wie ein Zauber!

0
Hugo Lauzon

Hier ist also der endgültige Fix, der für mich gut funktioniert.

 @media screen und (-webkit-min-device-pixel-ratio: 0) {
 wählen,
 Textbereich, 
 Eingabe {
 Schriftgröße: 16px! wichtig; 
 } 
 } 

0
Adeel Malik

hier ist die jQuery-Lösung für mich gut.

device_type = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
if(device_type === "touchstart" ){
$('head').append('<style type="text/css">input,  select, textarea {font-size: 16px;}</style>');
}
0
jalalBK

Verwenden Sie maximum-scale=1 anstelle von user-scalable=no, um das Problem mit dem Zoomen des Formulars zu verhindern, ohne die Möglichkeit des Benutzers, den Zoom zu klemmen, zu beeinträchtigen.

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

0
daxmacrog