Warum mobile Browser laden meine Seite komplett gezoomt-in?

Zur Zeit arbeite ich an einer Website für einen Kunden (noch in Arbeit) und zu versuchen, zu beheben einige der mobile-Themen auf der Website.

Das Hauptproblem das ich habe ist, dass die mobilen Browser (android + iphone) laden Sie die Website komplett gezoomt-in auf der oberen linken Teil der Website. Ich möchte es werden verkleinert, um zu passen, die ganze Seite Breite in den Arbeitsbereich, unabhängig von der Breite des Viewports.

Der Website können hier eingesehen werden: http://www.graceprep.com

Gibt es eine einfache Lösung für dieses Problem? Ich bin erfahren mit HTML /CSS, aber ich bin ein bisschen ein Neuling, wenn es um mobile Browser.

Hier ist etwas HTML-Code in meine header.php Datei, die relevant sein könnten. Ich habe versucht, ändern der width-Eigenschaft ohne Erfolg. Der initial-scale-Eigenschaft ist wirksam, aber zu breit - ich möchte die Seite komplett gezoomt-out für alle mobilen Browser, egal wie die Orientierung oder die Bildschirm-Größe.

Gibt es eine Möglichkeit, dies zu tun?

  • Ich weiß, das war in 2012. Aber ich möchte Sie Fragen, wie hast du das Problem gelöst. Ich habe auch gleiche Problem. Bitte teilen Sie, wenn es irgendeinen fix. Ich habe meta-viewport " content-to-device-width. Dank
  • die ausgewählten Antwort - dieser arbeitete für mich
InformationsquelleAutor timshutes | 2012-05-25
  1. 8

    Warum haben Sie das meta-tag überhaupt? Wenn Sie vollständig entfernen, das Gerät entscheidet über die zoom-Stufe automatisch.

    • Ich denke, ich dachte, es sei ein best-practice für mobile.. aber es scheint gut zu funktionieren, ohne es.
    • vielen Dank - das war die Lösung. Ich denke, es war ein überbleibsel aus der einige der frühen Entwürfe waren besser.
    InformationsquelleAutor Grezzo
  2. 4

    Ich bin mir fast sicher, dass

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

    sollte lösen das Problem. Sie können festlegen, "Breite" auf das, was Wert, den Sie wollen, aber von settin es zu device-width passt zu jedem Gerät die pixel-Breite". "initial-scale" steuert die zoom-Stufe an, die angegebene Breite.

    • Dank Jason - ich habe das bereits eingestellt ist - also vielleicht etwas verhindern, dass das korrekt funktioniert?
    • in meinem Kopf: <meta name="viewport" content="width=device-width, initial-scale=1.0">
    InformationsquelleAutor rhodesjason
  3. 0

    Es scheint, dass die meisten mobilen Browser neigen dazu, zu kommunizieren ein Standard-viewport-Breite, die erheblich breiter als die Breite des Handys. Zum Beispiel, iOS Safari meint, eine Webseite ist 980px breit, und verkleinert, um zu passen das ganze innerhalb der verfügbaren iPhone 4 320px(https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972). Android Browser neigen zur Anpassung an eine Breite zwischen 800 bis 1024 CSS-Pixel (https://developers.google.com/speed/docs/insights/ConfigureViewport).

    Die erwartete Breite scheint irgendwie mitgeteilt werden, bevor das meta-tag implementiert ist, und so in manchen Situationen einstellen der Breite auf die Breite des Gerätes scheint dann so behandelt zu vergrößern.
    Es sei denn, die css auf Ihrer Seite verwendet media queries zur Anpassung an die tatsächliche Breite des Gerätes, ist es besser, meiner Meinung nach, zu vermeiden, fehlt die "width=device-width' Wert, und nur die Einstellung der anderen Einschränkungen, die Sie suchen.

    InformationsquelleAutor Graeme Campbell
Schreibe einen Kommentar