Deaktivieren Sie den Zoom auf den Eingabefokus auf der Android-Webseite

77

Hier ist das Dilema, ich habe eine Webseite (nur für Android-Geräte) und auf dieser Seite habe ich ein Eingabefeld (speziell ein Textfeld) und wenn es fokussiert wird, zoomt der Browser hinein. Ich möchte nicht, dass es hineinzoomt - Sounds einfach richtig?

Hier macht es Spaß: Ich muss generell zoomen können, also sag es nicht

<meta name='viewport' content='user-scalable=0'>

Das wird bei mir nicht funktionieren.

Außerdem erhält das Eingabefeld keine Klickereignisse. Es wird angezeigt, wenn auf eine andere Schaltfläche geklickt wird, um den Fokus programmgesteuert zu erhalten.

Folgendes habe ich versucht und sie sind bisher gescheitert:

jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no" />');
jQuery("#locationLock input").focus();
jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes" />');

Dies schlug auch fehl:

<input type='text' onfocus="return false">

Und das:

jQuery("#locationLock input").focus(function(e){e.preventDefault();});

Irgendwelche Ideen?

Coomie
quelle
Der Chrome-Browser zoomt also nur, wenn sich bereits Inhalte im Eingabefeld befinden. Sie können also versuchen, das Entfernen des Inhalts zu perfektionieren, eine Zeitüberschreitung festzulegen und den Inhalt später wieder hinzuzufügen (ca. 150 ms). Trotzdem gibt es einige Probleme mit dem ersten lang gedrückten Fokus auf ein Eingabefeld. IMO, wenn Sie dies tun möchten, halten Sie das Timeout kurz, fügen Sie aus UX-Gründen einen kleinen jQuery-Ladeeffekt hinzu und greifen Sie einfach auf eine Schriftgröße von 18 Pixel für die Eingabe zurück. Der Zoom ist vorhanden, damit der Benutzer die Caret-Position einfacher ändern kann Denken Sie auch darüber nach.
Niall.Campbell
Moderator Hinweis : Im Laufe der Zeit hat diese Frage über 30 Antworten erhalten. Stellen Sie vor dem Hinzufügen einer neuen Antwort sicher, dass Ihre Lösung noch nicht bereitgestellt wurde.
Matt

Antworten:

36

Folgendes hat bei mir funktioniert (Android Galaxy S2):

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>
rebpp
quelle
Dies sollte auf jeden Fall die aktuell richtige Antwort sein!
Axelbrz
3
Das funktioniert. Sie sollten jedoch anstelle von verwenden; Ich denke auch, dass der Kommentar zur Benutzerfreundlichkeit ignoriert werden kann, da wir wahrscheinlich alle hier sind, weil in einem bestimmten Fall, in dem wir dieses Verhalten ausdrücklich verhindern möchten, eine schlechte Benutzerfreundlichkeit vorliegt.
Jey DWork
Funktioniert auf dem iPhone X. Dies sollte die richtige Antwort sein
Shalin Nipuna
30

Nicht möglich!

Ich habe schlechte Nachrichten für euch alle. Es ist jetzt 6 Monate her und niemand hat die Frage richtig beantwortet.

Außerdem habe ich die Arbeit an diesem Projekt und dem Arbeitgeber beendet.

Ich habe Angst, es zu sagen, aber genau das, wonach ich gefragt habe, ist unmöglich. Sorry Leute. Aber ich werde die Frage am Leben lassen, damit die Leute die anderen Optionen sehen können.

Coomie
quelle
7
Eine Lösung ein Jahr später?
Justin Cloud
12
Ok, wie wäre es jetzt?
Andrei Cristian Prodan
1
Fügen Sie dem Chromium- Problembericht
Jo P
1
Es gibt viele Lösungen. Am besten stellen Sie sicher, dass Ihr Dokumentkörper nicht breiter als die native Bildschirmgröße ist.
Tony Chiboucas
1
Es ist jetzt offiziell: Diese nervige Funktion ist jetzt in der neuen Version von Chrome endlich entfernt! Siehe code.google.com/p/chromium/issues/detail?id=181560#c28 und codereview.chromium.org/196133011 .
Med
14

Skalierungsprobleme Ursache Vergrößern des Eingabefokus

Es ist sehr schwierig, den Inhalt für verschiedene Bildschirmauflösungen und -größen zu dimensionieren, was letztendlich die Ursache für dieses Zoomproblem ist.

Die meisten mobilen Browser haben einen Auslöser für den Eingabefokus (den Sie nicht ohne Schwierigkeiten überschreiben können):

if (zoom-level < 1)
   zoom to 1.5
   center focused input relative to screen

* Ja, das war viel zu stark vereinfacht.

Mythos von Meta-Tag-Skalierungskorrekturen.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> Alle diese Ansichtsfenstereinstellungen verhindern nicht, dass der Eingabefokus vergrößert wird, wenn Sie verkleinert werden. Diese überschreiben auch keine anderen HTML-, Körper- oder Elementgrößen, die das Fenster auf eine Breite bringen würden, die breiter als der Bildschirm ist.

Hauptursache

Verwenden eines Fensters oder einer Körpergröße, die größer als die Bildschirmabmessungen des Geräts ist.

Betrachten Sie die Standard-Bildschirmgröße der meisten Galaxy-Smartphones von Android-Smartphones: 360 x 650. Wenn Ihr Dokumentkörper oder Fenster größer als das definiert ist (sagen wir 1024 breit, um dies deutlich zu machen), können einige Dinge passieren geschehen:

  1. Der Browser kann automatisch verkleinern, um die Breite an den Bildschirm anzupassen.
    1. Der Benutzer kann die oben genannten Schritte ausführen.
    2. Möglicherweise haben Sie das oben genannte getan.
  2. Der Browser stellt die Zoomstufe bei nachfolgenden Besuchen der Seite wieder her.
  3. Sie sehen den Inhalt jetzt mit ~ 0,35-fachem Zoom.

Ausgangszustand 1x

Beim Laden passt die Seite nicht. Einige Browser können verkleinern, um sie an das Fenster anzupassen, aber der Benutzer wird es mit Sicherheit tun. Wenn Sie diese Seite einmal verkleinert haben, speichert der Browser außerdem die Zoomstufe.

Verkleinern, um das 0,35-fache anzupassen

Nach dem Verkleinern passt die Breite gut und eine Seite mit mehr vertikalem Bereich füllt den Bildschirm ganz gut aus ... aber ...

Beachten Sie, dass sich der Browser jetzt in einem Zustand befindet, in dem Text und Eingabe (Größe für normalen 1-fachen Zoom) viel zu klein zum Lesen sind, wodurch ein Usability-Verhalten beim Zoomen auf die Eingabefelder ausgelöst wird, wenn sie fokussiert werden.

Zoomen Sie auf den Eingangsfokus 1,5x

Typisches Verhalten im obigen Fall ist das Zoomen auf das 1,5-fache, um die Sichtbarkeit der Eingabe zu gewährleisten. Das Ergebnis (wenn Sie alles so gestaltet haben, dass es beim Herauszoomen oder beim größeren Bildschirm besser aussieht) ist weniger als wünschenswert.

Lösung 1

Verwenden Sie eine Kombination aus CSS-Medienregeln, Geräteerkennung oder dem, was Ihrer Situation am besten entspricht. Stellen Sie das Fenster und den Körper auf eine Größe ein, die den Bildschirmbereich ausfüllt, ohne ihn zu überschreiten.

  • Aus diesem Grund haben so viele Menschen Erfolg damit, die Größe des Eingabetextes auf 16 Pixel zu erzwingen.
    • Sobald Sie das tun, ist es klar, dass Sie weggezoomt sind.
    • Es hat auch den zusätzlichen Vorteil, dass der Browser dazu gebracht wird, dass leicht verkleinerte Fenster den Fokus-Zoom nicht auslösen.

Lösung 2

Verwenden Sie das Meta-Ansichtsfenster, aber seien Sie dann vorsichtig mit den CSS-Breiten.

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  • Wenn Sie diese Methode verwenden, müssen Sie einen der folgenden Schritte ausführen:
    • Verwenden Sie nur Prozentsätze für Breiten.
    • Definieren Sie eine em-Breite und verwenden Sie em und% nur für Breiten.
    • Informationen zur Verwendung von px-Breiten finden Sie in Lösung 1.

Lösung 3

jQuery.mobile $.mobile.zoom.disable();

Stellen Sie einfach sicher, dass Sie von Anfang an damit beginnen und nicht von der Mitte aus.

Tony Chiboucas
quelle
12

Ich bin nicht sicher, ob dies der beste Weg ist, aber das funktioniert für mich auf Android und iPhone.

input:focus { font-size: 16px!important}

Sie können Medienabfragen nur für mobile Geräte verwenden.

Saroj
quelle
... zusätzlich wird dies normalerweise durch falsch dimensionierte / gezoomte Fenster / Körper verursacht.
Tony Chiboucas
Sie können Medienabfragen nicht verwenden, um auf mobile Geräte nur deren Breite oder Höhe abzuzielen. Viele Touch-Geräte sind so groß wie Desktop-Geräte. Die Erkennung von Touch- oder No-Touch-Geräten erfolgt über Skripte oder Server.
Christina
Ich denke nicht, dass dies auch nur annähernd eine richtige Antwort ist. Das Problem beim automatischen Zoom liegt nicht nur in der "kleinen Schrift", sondern auch in der Illusion von falsch positionierten Elementen. In meinem Fall wird beispielsweise die Eingabe vergrößert und nicht auf dem Bildschirm zentriert. Daher wurde mir eine "falsche Dialogposition" gemeldet, als der Benutzer nichts von diesem "Autozoom" wusste
Kamilius
4

Ja es ist möglich

input[type='text'],input[type='number'],textarea {font-size:16px;}

Getestet in Android 4.2 Browser und Android Chrome.

https://stackoverflow.com/a/6394497/4264

Der einzige Fall, bei dem ich feststellte, dass das Zoomen fortgesetzt wurde, war in Chrome mit Einstellungen -> Zugänglichkeit -> Textskalierung über 100%.

Santiago Corredoira
quelle
4

Ist heute auf dieses Problem gestoßen und wird möglicherweise bald ein Chrom-Update erhalten, das das Problem beheben könnte. Pro der Chrom Ausgabe , auf den @Jo,

no.28 jdd ... @ chromium.org Ab https://codereview.chromium.org/196133011/ ist das automatische Zoomen auf Websites mit einem für Mobilgeräte optimierten Ansichtsfenster (z. B. "width = device-width" oder "fixed" deaktiviert Anmerkung zum Seitenfenster-Ansichtsfenster).

Wenn Sie bearbeitbare Elemente auf solche Sites fokussieren, wird möglicherweise weiterhin automatisch gescrollt, um die Sichtbarkeit des Elements zu gewährleisten. Das Zoomen wird jedoch deaktiviert. Dies wird in M41 live gehen (noch eine gute Anzahl von Wochen nach dem Erreichen des Beta-Kanals).

Wir haben keine Pläne, das automatische Zoomen für ältere Desktop-Sites anderweitig zu verhindern.

Ab diesem Zeitpunkt ist Chrome v.40; v.41 ist in BETA. Wird einchecken, um festzustellen, ob der Fokus im Android Chrome-Browser weiterhin verloren geht.

cthorpe
quelle
Die my-Instanz dieses Vorkommens wurde behoben. Für mich trat dieser Fehler beim Verschieben von Elementen (einschließlich eines Formulars mit zwei Texteingaben) für Medienabfragen auf. Die Verwendung von .insertBefore () / .insertAfter () von jQuery hat etwas kaputt gemacht und die Verwendung von .prependTo () / .appendTo () hat funktioniert. Das heißt, Android Chrome wurde nicht gezwungen, die Größe des Eingabefokus zu ändern.
Cthorpe
3

Ich habe mir dieses Problem angesehen, da es mich mit meiner HTML5-Android-App irritiert hat. Ich kann eine halbe Antwort geben. Das heißt, wie man die Seitenskalierung stoppt, wenn ein Textfeld fokussiert ist.

Benötigt Jquery Mobile:

$('#textfield').textinput({preventFocusZoom:true});

macht genau das.

Aber wie gesagt, dies löst nur die Hälfte des Problems. Die andere Hälfte ermöglicht es dem Benutzer, die Seite anschließend erneut zu zoomen. Die Dokumentation, die ich gefunden habe, scheint darauf hinzudeuten

    $('#textfield').textinput({preventFocusZoom:false});

oder

$('#textfield').textinput('option','preventFocusZoom',false);

sollte es deaktivieren, aber ich habe es nicht geschafft, eine der beiden Optionen zum Laufen zu bringen. Kein Problem, wenn Sie den Benutzer später auf eine andere Seite bringen, aber von begrenztem Nutzen, wenn Sie wie ich nur Inhalte über AJAX laden.

EDIT: Obwohl auf IOS gerichtet,

$.mobile.zoom.disable();

Stoppt auch das Zoomen. In geeigneterer allgemeiner Weise. Aber leider

$.mobile.zoom.enable();

Die Funktionalität kann nicht wie beim vorherigen Code wiederhergestellt werden.


quelle
verhindern, dass FocusZoom den nativen Android-Browser verwüstet. Jedes Mal, wenn eine Formulareingabe fokussiert wird, wird die Seite nach oben gescrollt, die Eingabe erhält keinen Fokus und die Tastatur wird erst angezeigt, wenn Sie versuchen, die Eingabe ein zweites Mal zu fokussieren. Als Fehler gemeldet.
Billy
3
font-size: 18px;

Dies hat es für mein Nexus 7 (2011) mit Android 4.3 behoben.

Dieses Problem besteht nur für mich auf dem Nexus 7, die folgenden Geräte scheinen alle mit der Schriftgröße zufrieden zu sein: 16px:

  • HTC Desire Android 2.3.7
  • Nexus 4 Android 4.3

Hoffe das hilft jemandem!

Hung-Su
quelle
Kürzlich auf Nexus4 getestet. Gefunden, dass 18px nicht genug ist. Ich benutze Punkte, also habe ich 1.3em verwendet
Wurmhit
Danke Wurmhit. Ich habe festgestellt, dass mein Nexus 7 in letzter Zeit keine Zoomprobleme mehr hat, was möglicherweise auf Android 4.4 zurückzuführen ist.
Hung-Su
Das Einstellen der Schriftgröße auf 18px hat auch für Galaxy Note 3 geholfen.
Lev
Das Erzwingen des Inhalts auf eine bestimmte Schriftgröße ist keine akzeptable Lösung, da 16px oder 18px auf einem HD-Bildschirm nicht lesbar sind, es sei denn, Sie erzwingen auch einen Zoomgrad mit CSS. Das würde dies zu einem sehr schlechten CSS-Hack machen, der auf anderen Systemen NICHT gut funktionieren würde
Tony Chiboucas
@ TonyChiboucas aber CSS pxsind keine
Gerätepixel
2

Dies funktioniert, wenn #inputboxdie ID des Eingabeformularelements angegeben ist.

Ich verwende dies, um zu verhindern, dass ein Suchfeld in IOS automatisch zoomt. Dies ist eine Modifikation des vorherigen Beitrags oben, da das Mouseover-Ereignis nur beim ersten Mal funktioniert, aber keine nachfolgenden Zeiten auslöst. Genießen Sie dies, es war ein echter Haarzieher ...

$("#inputbox").live('touchstart', function(e){
    $('head meta[name=viewport]').remove();
    $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
    }
);

$("#inputbox").mousedown(zoomEnable);

function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}
Dotnoise
quelle
2

Nur eine Randnotiz:

Die Lösung mit dem meta name="viewport"funktioniert perfekt. Sowohl native als auch Chrome-Browser in Android verfügen jedoch über eine Eingabehilfeneinstellung mit dem Namen "Anforderung der Website zur Steuerung des Zooms überschreiben". Wenn diese Einstellung festgelegt ist, kann nichts in HTML, CSS oder JavaScript das Zoomen deaktivieren.

Serge
quelle
2

Du brauchst 2 Dinge:

Verwenden Sie ein Metatag wie dieses in Ihrem Kopf, um zu vermeiden, dass der Benutzer zoomt:

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

Und dann geben Sie in Ihr CSS Folgendes ein, um zu verhindern, dass der Browser zoomt:

* { font-size:16px; }

Getan! Ich denke, der Browser ändert die Größe Ihres Ansichtsfensters basierend auf der kleinsten Schriftart oder ähnlichem. Vielleicht könnte es jemand besser erklären, aber es hat funktioniert :)

Beto Aveiga
quelle
Zum Testen habe ich in mein CSS geschrieben * {Schriftgröße: 16px! Wichtig; } und der Zoom ist vollständig verschwunden. Ich denke, dass einige Texte auf der Seite, die klein bleiben, dazu führen, dass der Browser beim Fokussieren einer Eingabe zoomt.
Beto Aveiga
Im Moment ist meine Seite in der HTML-Struktur zu komplex. Es wäre schön, mit einem einfacheren Markup zu testen, um eine bessere Lösung zu finden.
Beto Aveiga
2

Fügen Sie dieses Meta-Tag zu Ihrer HTML-Datei hinzu, um das Problem zu beheben.

<html><head><meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0' ></head><body>html code</body></html> 
Patel Disha
quelle
1

Arbeitendes Model

Wir haben dies auf Android arbeiten. Hier ist der Schlüssel: Die Schriftgröße am Eingang muss die richtige Größe haben. Wenn Ihre Seite 320 Pixel breit ist, benötigen Sie eine Schriftgröße von 16 Pixel. Wenn Ihre Größe 640px beträgt, benötigen Sie eine Schriftgröße von 32px.

Darüber hinaus benötigen Sie Folgendes

320 breite Version

<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, minimum-scale=1" />

640 breite Version

<meta name="viewport" content="width=640, initial-scale=.5, maximum-scale=.5, minimum-scale=.5" />

HINWEIS: DIESES ENTHÄLT NICHT DAS BENUTZER-SKALIERBARE ATTRIBUT. DAS WIRD ES BRECHEN.

Soshmo
quelle
1

Für alle, die versuchen, den Zoom zu stoppen, wenn sie versuchen, sich auf ein verstecktes Eingabefeld zu konzentrieren, können Sie die versteckte Eingabe so groß (oder mindestens so breit) wie den Bildschirmbereich (oder den sichtbaren Bereich) machen - dies hat das Zoomen gestoppt.

z.B

HIDDENinput.style.width = window.innerWidth;

HIDDENinput.style.height = window.innerHeight; (Optional)

Aaron
quelle
1

Dies kann eine gute Antwort sein:

input, textarea {
  max-width:100%;
}

Nicht benutzen <meta name=viewport content='user-scalable=no'>

Guru
quelle
1

Ich bin nicht sicher, ob Sie den Zoom deaktivieren können, aber Sie können eine solche Einschränkung festlegen

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

Maximum-Scale = 0,5 und Minimum-Scale = 0,5 sollten den Trick machen. Es hat bei mir funktioniert.

Razvan Tanase
quelle
1

Wenn Sie die Schriftgröße der Eingabe auf 16 Pixel einstellen, stoppt der Zoom. Mobile Browser gehen davon aus, dass weniger als 16 Pixel bedeuten, dass die Benutzer zoomen müssen. Warum mache ich das nicht selbst?

 input[type='text'],input[type='number'],textarea {font-size:16px;}
 body{ -webkit-text-size-adjust:none;}

Sie können auch das folgende Meta-Tag festlegen, es verhindert jedoch die vollständige Skalierung des Benutzers.

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

Wenn Sie eine Benutzerskalierung wünschen, aber nur die Eingabeskalierung deaktivieren möchten, versuchen Sie dies

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

versuchen Sie auch dies

aWebDeveloper
quelle
1
@tobyodavies Mein Android (HTC Desire S) verarbeitet tatsächlich Änderungen am viewportMeta-Tag. Ich setze den Zoom wie folgt zurück: $('meta[name=viewport]').attr('content', 'initial-scale=1.0, maximum-scale=0.05');Dies führt jedoch dazu, dass der Browser das Ansichtsfenster nach links verschiebt, oben = 0,0.
KajMagnus
1

Normalerweise möchten Sie die Eingabehilfen nicht deaktivieren.

Sie können das Zoomproblem jedoch umgehen, indem Sie einfach ein festes Div hinzufügen und Ihre Webseite darin platzieren.

#app {
  position: fixed;
  top: 0em;
  bottom: 0em;
  left: 0em;
  right: 0em;
  overflow: scroll;
 }
<body>
<div class="app">
  <!-- the rest of your web page  -->
  <input type="text">
</div>
</body>

<body>
     <div class="app">
     </div>
</body>
Zach Radloff
quelle
0

Vielleicht könnten Sie das Zoomen vermeiden, indem Sie die Zoomskala auf 1,0 zurücksetzen? Auf meinem Android (HTC Wildfire S) kann ich den Zoom wie folgt auf 1.0 zurücksetzen:

$('meta[name=viewport]').attr('content',
         'initial-scale=1.0, maximum-scale=0.05');

Dadurch wird das Ansichtsfenster jedoch auf 0, 0 (obere linke Ecke der Seite) verschoben. Also ich $().scrollLeft(...)und .scrollTop(...)zurück zum form.

( initial-scale=1.0, maximum-scale=0.05ist mein Anfangswert des viewportMetas.)

(Der Grund, warum ich dies tue, besteht nicht darin, das Zoomen von Android zu verhindern, sondern den Zoom aufgrund anderer Android-Fehler, die ansonsten beschädigt sind, screen.widthund anderer verwandter Werte auf einen bekannten Maßstab zurückzusetzen .)

KajMagnus
quelle
0

Versuchen Sie dieses, es funktioniert auf meinem Gerät:

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

Wenn ich jedoch auf das Eingabefeld doppelklicke, wird die Tastatur nach oben verschoben und die Höhe der Seite verringert.

Shi Chuan
quelle
0

Durch Zufall entdeckte ich, dass dies:

 input {
     line-height:40px;
 }   

verhindert das Vergrößern der Eingabe auf meinem Galaxy Nexus mit Chrome für Android Version 18, obwohl dies möglicherweise spezifisch für meinen Fall ist:

<meta name='viewport' data='width=800'>

Wenn Sie also über Google hierher kommen, ist dies möglicherweise eine der anderen Lösungen.

aep
quelle
0

Ich hatte das gleiche Problem (nur im Android Chrome Browser). Ich habe das Problem so gelöst.

  1. Erkannte den userAgent und band die Ereignisse onFocus und onBlur der Textfelder, um den Metainhalt des Ansichtsfensters wie folgt zu ändern

    if ((navigator.userAgent.match(/Android/i)) && (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)) {
    isAndroidChrome = true;    
    }
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    
  2. onFokus des Textfelds habe ich den folgenden Metainhalt des Ansichtsfensters festgelegt viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1';

  3. Wenn Sie im Textfeld den Metainhalt des Ansichtsfensters auf "Zurücksetzen" viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.4'; setzen, können Sie die maximale Skalierung festlegen, wenn Sie dies wünschen, oder wenn Sie möchten, dass sie vom Benutzer skaliert werden kann, stellen Sie die maximale Skalierung nicht ein

Wenn Sie den Auslöser ändern, wird das onFocusEreignis der Eingabe, falls dies der Fall maximum-scaleist 1, nicht vergrößert. Dies hat bei mir wie ein Zauber funktioniert. Hoffe es funktioniert auch bei dir.

Vignesh PT
quelle
0

Wie @soshmo sagte, user-scalableist dies kein Attribut, das WebKit gefällt, und daher führt seine Aufnahme dazu, dass WebKit das gesamte Ansichtsfenster-Tag verwirft. Ich habe auch festgestellt, dass dies bei der Einstellung maximum-scaleauf etwas anderes als 1 der Fall ist , und das hat das Zoomen nicht gestoppt.

Das Zurücksetzen der viewportauf jedem focusund blurEreignisse für mich gearbeitet:

var htmlWidth = parseInt($('html').outerWidth());
var screenDPI = parseInt(window.devicePixelRatio);
var screenWidth = parseInt(screen.width);
var screenHeight = parseInt(screen.height);    
var scaleVal = (((screenWidth * screenDPI) / htmlWidth)/screenDPI);
$('input[type="text"], input[type="password"], input[type="email"]').each(function() {

    //unchained for clarity

    $(this).focus(function() { 
        $('meta[name="viewport"]').attr('content', "initial-scale=' + scaleVal + ', maximum-scale=1, minimum-scale=' + (scaleVal) + ', width=device-width, height=device-height");
        // Do something to manage scrolling the view (resetting the viewport also resets the scroll)
        $('html, body').scrollTop(($(this).offset().top - (screenHeight/3)));
    });

    $(this).blur(function() { 
        $('meta[name="viewport"]').attr('content', "initial-scale=' + scaleVal + ', maximum-scale=1, minimum-scale=' + (scaleVal) + ', width=device-width, height=device-height");
    });
});

Wenn Sie diese Einstellung / das Zurücksetzen finden, sollten viewportSie überprüfen, ob WebKit die von Ihnen verwendeten Inhaltsattribute akzeptiert. Es dauerte eine Weile, bis mir klar wurde, dass durch die Verwendung von Dingen wie user-scalabledas viewportverworfen wurde. Obwohl das JavaScript funktionierte, waren die Änderungen nicht betroffen.

Bernard Clark
quelle
0

Das Festlegen der benutzerskalierbaren Eigenschaft des Ansichtsfensters bei Touchstart hat dies für mich erledigt. Sie müssen es nicht entfernen und erneut hinzufügen. Ändern Sie es einfach bei Touchstart und aktivieren Sie es bei Unschärfe erneut. Das heißt, der Benutzer kann nicht zoomen, während er sich auf das Feld konzentriert, aber ich denke, es ist ein geringer Preis zu zahlen.

var zoomEnable;

zoomEnable = function() {
  $("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=yes");
};

$("input[type='text']").on("touchstart", function(e) {
  $("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=no");
});

$("input[type='text']").blur(zoomEnable);
listylister
quelle
0

Für Nexus 7 bekam ich dieses Problem, als meine Medienabfrage lautete:

@media screen and (max-device-width: 600px) and (orientation : portrait)

Daher habe ich die folgende Medienabfrage verwendet, um das Problem zu beheben.

@media screen and (max-device-width: 600px) and (max-aspect-ratio: 13/9)

Sam
quelle
0

Etwas spät zur Party, aber ich habe gestern einen ganzen Nachmittag damit verbracht, verrückt zu werden, bevor ich zu diesem Beitrag kam und feststellte, dass es sich um eine Funktion / einen Fehler von Android handelt. Also werde ich meine Lösung posten. Dies hat bei mir funktioniert und ermöglicht weiterhin das Zoomen des Benutzers:

Meta:

<meta id="meta1" name="viewport" content="width=device-width,initial-scale=1,minimal-ui"/>

CSS:

html{
    position:absolute;
    overflow:-moz-scrollbars-vertical;
    overflow-y:scroll;
    overflow-x:hidden;
    margin:0;padding:0;border:0;
    width:100%;
    height:100%;
    }
body{
    position: relative;
    width: 100%;
    height: 100%;
    min-height:100%;
    margin: 0;
    padding: 0;
    border: 0;
}

HTML setzen position:absoluteund overflow-x:hiddenden Trick für mich gemacht.

Michel
quelle
0

Arbeitete für Galaxie 4:
Fügen Sie den Code zur HTML-Header-Indexdatei hinzu:

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>

Shay Golan
quelle
0

Ich poste eine Antwort, weil ich auf ein ähnliches Problem gestoßen bin und es gelöst habe.

Mein Zustand ist unten.

Eine Ansichtsfenstereinstellung in HTML-Kopf ist

<meta name="viewport" content="width=640">

Agenten sind Android-Standardbrowser.
Sie sind nicht Chrome, Firefox und Safari.
Android-Versionen sind unter 4.2.x.

Details unserer Situationen sind nicht gleich, aber ich denke, sie haben ein im Wesentlichen gleiches Problem.

Ich habe beschlossen, "target-densdpi = device-dpi" in das Meta-Tag [name = viewport] einzufügen.

<meta name="viewport" content="width=640, target-densitydpi=device-dpi">

Probieren Sie es bitte aus.

Aber ich muss sagen, dass "target-densdpi = device-dpi" einen Nebeneffekt haben würde.

Schlechter Fall ist hier.

  1. Ein alter Android-Browser liest "target-densdpi = device-dpi".
  2. Es wird zur anderen Seite weitergeleitet, die keine Eigenschaft target-densdpi hat.
  3. Der Browser beginnt mit dem Rendern der Seite als "target-densdpi = device-dpi".
  4. Die nächste Seite wird also in einem falschen Skalierungsfaktor dargestellt.

Eine Lösung für diesen Fall besteht darin, die Eigenschaft target-densdpi mithilfe von Javascript von "device-dpi" in "medium-dpi" umzuschreiben, bevor Sie zur nächsten Seite wechseln.

Ein Beispiel mit jQuery.

<a href="go-to-the-other" class="resetDensityDpi">Other page</a>
<script>
$(function(){
    $('.resetDensityDpi').click(function(){
        var $meta = $('meta[name="viewport"]');
        $meta.attr('content', $meta.attr('content').replace(/target-densitydpi=device-dpi/, 'target-densitydpi=medium-dpi'));
        return true;
    });
});
</script>

Und ... dieser Code verursacht ein neues Problem.
Einige Browser rendern Ergebnisse des Javascript-Prozesses mithilfe von Cache-Daten, wenn sie mit einer Zurück-Schaltfläche zur vorherigen Seite zurückkehren. Daher zeigen sie die vorherige Seite als "Zieldichte dpi = mittel-dpi" an, NICHT als "Zieldichte dpi = Gerät-dpi".

Eine Lösung hierfür ist genau das Gegenteil von oben.

<script>
$(function(){
    var rollbackDensityDpi = function() {
        // disable back-forword-cache (bfcache)
        window.onunload = function(){};

        var $meta = $('meta[name="viewport"]');
        if ($meta.attr('content').match(/target-densitydpi=medium-dpi/)) {
            $meta.attr('content', $meta.attr('content').replace(/target-densitydpi=medium-dpi/, 'target-densitydpi=device-dpi'));
        }
    };

    if (window.addEventListener) {
        window.addEventListener("load", rollbackDensityDpi, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", rollbackDensityDpi);
    } else {
        window.onload = rollbackDensityDpi;
    }
});
</script>

Vielen Dank.

Murai Satoshi
quelle
0

Halten Sie den Inhalt schmaler als das Fenster.

Sie müssen Ihre Seite von Anfang an so gestalten, aber sie ist völlig effektiv.

Der Schlüssel besteht darin, die @mediaCSS-Regel zu verwenden, um nur Komponenten mit Breiten zuzulassen, von denen Sie wissen, dass der Bildschirm groß genug ist, um sie aufzunehmen.

Wenn Sie beispielsweise eine Inhaltsbreite festgelegt haben, damit der Text auf einem größeren Monitor nicht zu weit verteilt wird, stellen Sie sicher, dass die Breite nur für große Bildschirme gilt:

@media (min-width: 960px){
.content{
  width : 960px;
}
}

Oder wenn Sie ein Bild mit einer Breite von 500 Pixel haben, müssen Sie es möglicherweise auf kleineren Bildschirmen ausblenden:

@media (max-width: 500px){
.image{
  display : none; 
}
}
Martin
quelle
0

Versuchen Sie dies, dies passt in die Gerätegröße und vermeidet das Vergrößern / Verkleinern

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