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?

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

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.

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.
   2. Der Benutzer kann die oben genannten Schritte ausführen.
   3. 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.

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.

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

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.

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.

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!

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" />');
}

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.

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 :)

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> 

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.

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)

Dies kann eine gute Antwort sein:

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

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

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.

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

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>

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

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.

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.

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.

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.

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

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)

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.

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

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.

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

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