Zoom auf Höhe des Displays verhindern

  • Hallo,


    ich bin neu hier und muss mich mit einem Problem hier an Euch wenden, dass mir arge Kopfzerbrechen bereitet.


    Meine Seite hat zwei Designs, eins für Desktop (geht alles super) und eines für Mobiles (getestet mit iOS, was anderes hab ich hier nicht)


    Auf dem Mobile (hochkant gehalten) habe ich nun den Effekt, dass mir Seiten, die "höher" als das Display sind, in der Breite korrekt dargestellt werden (auf Breite des Displays gezoomt)

    Soweit so gut, und auch gewollt.

    Ist die Seite aber "kürzer" als die Bildschirmhöhe, wird immer automatisch gezoomt, teils so, dass die kleinere Höhe gerade die Bildschirmhöhe ausfüllt, teils minimal weniger.

    In jedem Fall aber so, Dass ich jetzt leider seitlich scrollen muss, was ich natürlich vermeiden möchte, jedenfalls sofern der User nicht bewusst zoomt und dann eben in allen Richtungen scrollen muss.


    Ich vermute irgendwas in Richtung VIEWPORT, bekomme das aber nicht geregelt.


    Hatte so ein Problem hier schon mal jemand?


    Tschau

    Stefan

  • ich habe zZt „width=device-width“ leider bringt das den gewünschten Erfolg nur, wenn die Seite länger als der Bildschirm in der Höhe ist.


    was immer ich probiert habe, führt entweder zu noch stärkerem Einzoomen, bei allen Seiten, oder dazu, dass plötzlich die Desktopansicht benutzt wird.


    ich habe mal Bilder angehängt, was ich meine, ich glaube ich habe das nicht gut beschrieben.

    Meine Seite zeigt teilweise Ergebnisse einer Datenbank an. Kommen nur wenige Ergebnisse (=kurze Seite) wird gezoomt.

    Kommen mehr Ergebnisse, wird die Seite länger und es wird gezoomt, wie ich es möchte, auf die Breite meiner Seite.



    die Suche nach „a Star is Born“ gibt ein Ergebnis und damit eine sehr kurze Seite mit starkem Zoom. Die Seite geht nach rechts weiter

    Suche nach „Terminator“ bringt mehr, aber immernoch weniger als nötig anscheinend.

    Suche nach „Space“ gibt dann noch mehr ergbnisse und die Seite wird so lang, dass in der BREITE alles richtig gezoomt wird.


    das mit dem Datenbank-Gridview ist nur ein Beispiel, ich habe da auch statische Seiten mit nur Text und Bildern, die unterschiedliche Längen aufweisen. Sonst könnte ich als workaround auch einfach das DIV mit dem content auf eine fixe (große) Höhe setzen. Das geht aber nicht, da dann Texte, die länger wären, nicht mehr komplett lesbar wären und sieht bei kurzen Seiten einfach doof aus.

  • Das genannte Meta-Tag ist nur eine Sache. Das ganze Layout der Seite muss auch passen, damit sie so angezeigt wird, wie Du es dir vorstellst. Hilfreicher als Screenshots wäre es, wenn man sich die Seite online ansehen könnte. Kannst Du die URL posten?

    Du schreibst

    Zitat

    ich habe zZt „width=device-width“

    Das entscheidende für das Zoomen ist jedoch die initial-scale-Anweisung. Hast Du die auch?

  • Hallo,


    http://minmax.birdies.de


    Die gezeigten Suchseiten sind nur mit Anmeldung erreichbar, die ANMELDUNGs Seite selbst hat aber das gleiche Problem und sollte zur Anschauung reichen.


    Mit dem initial-scale habe ich gestern schon etwas probiert, aber entweder wird dann noch stärker eingezoomt, oder dann plötzlich auf die Desktopansicht ungestellt, die am Mobile nicht wirklich taugt, deshalb wollte ich das mal splitten.

  • ich hab jetzt mal mit "min-height" in dem CSS for den DIV CONTENT gearbeitet. das bringt zwar das gewünschte Ergebnis, aber ich vermute, dass das nicht der "korrekte" Weg ist, oder?

  • Wenn Du initial-scale=1 angibst, stellt der Browser die Seite vom Zoom her genau so dar, wie Du sie gestaltet hast. Und Du hast bei allen Elementen die Breite auf > 500px gesetzt. Ist der Viewport schmaler, taucht zwangsläufig die horizontale Scrollbar auf. Deaktiviere ich diese Breitenangaben passen sich die Elemente dagegen an die Breite des Viewports an und die horizontale Scrollbar verschwindet.


    BTW: Du benutzt einen veralteten Doctype und float für die Gestaltung. Ich empfehle, auf HTML5 und Flexlayout umzustellen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!