Hallo zusammen,
ich habe eine kleine Website, bei der ich bislang davon ausging, daß sie
mit allen Browsern (inklusive Lynx) vernünftig dargestellt wird - und
das egal, ob der Benutzer gern die Schrift vergrößert oder zoomt.
Nur ein schmaler Streifen am Rand hat eine fixe Breite, alle anderen
Teile können fließen, wohin sie wollen.
Nachdem ich die Seite allerdings zum ersten Mal auf einem Mobilbrowser
gesehen habe weiß ich, daß das ein Irrtum war. Durch das Zoomen
verschieben sich die Teile zueinander, der Text bricht nicht neu um.
Bilder, die vormals zentriert waren befinden sich an der Stelle, wo sie
vor dem Zoom auch waren - was dann meist außerhalb des Bildschirms ist.
Kann man einem Mobilbrowser irgendwie nahelegen, daß derartige
Verzerrungen völlig überflüssig sind und er einfach, so wie ein normaler
Browser, die Schrift- und Bildgröße anpassen und den Rest normal rendern
soll?
Viele Grüße
W.T.
Ich mag dem Benutzer ja gar nicht die Möglichkeit zum Vergrößern
vorenthalten - im Gegenteil: Der Benutzer soll so seine Schrift und
Bilder vergrößern können, wie er es von anderen Browsern kennt.
Zoom im Mobilbrowser und Schriftvergörßerung im Desktopbrowser sind doch
aber völlig unterschiedliche Dinge.
Beim Zoom im Mobilbrowser wird doch lediglich die Darstellung auf dem
Display vergrößert und man kann sie Seite über das Display schieben. Da
wird doch weder die Schrift noch ein Bild vergrößert.
Da soll auch kein Text neu umgebrochen werden und wenn sich dann ein
Bild außerhalb des Bildschirms befindet, verschiebt man die Darstellung
bis man es wieder sieht.
Robert Knipp schrieb:> Da soll auch kein Text neu umgebrochen werden und wenn sich dann ein> Bild außerhalb des Bildschirms befindet, verschiebt man die Darstellung> bis man es wieder sieht.
Und das ist völlig überflüssig. Der Text wird beim Zoom neu umgebrochen
und auf die Bildschirmbreite beschränkt. Die Bilder bleiben dort, wo sie
vorher waren - also (jetzt) außerhalb des Bildschirms. Ergebnis ist ein
großer, horizontaler Scrollbereich mit großen, weißen Rändern - und das
ist völlig sinnlos. Schließlich kann man da eh nichts draufkritzeln.
Gibt es keine Möglichkeit einem Mobilbrowser klarzumachen, daß es
sinnvoll ist, sich einfach wie ein normaler Desktop-Browser zu
verhalten?
Probier mal innerhalb des <head> bereichs deiner Seite folgendes
einzufügen
<meta name="viewport" content="width=1024, initial-scale=1">
Damit sagst du dem Browser das er sich so verhalten soll, als ob das
Browserfenster 1024 Pixel breit ist.
Den Wert für die weite kannst du dann natürlich anpassen, dass es gut
für deine Seite passt.
Ansonsten wäre auch ein Link zu der Seite sinnvoll, dann könnte man dir
sicher besser helfen.
Hallo zusammen,
ich habe mal eine kleine Testseite zusammengestrickt, wo das genannte
Phänomen gut sichtbar ist:
Wird das Ganze auf einem normalen PC-Browser gestartet, verhält es sich
wie gewünscht: Ich kann Zoomen wie ich will, es bleibt immer alles
sauber eingepaßt (inkl. Bilder).
Auf einem Mobil-Browser mit einer Breite > 640 Pixeln ist das erste
Rendern wie gewünscht. Zoomt man jedoch mit der "pinch"-Geste,
verschiebt sich das Bild rechts aus dem Viewport und ein Teil des Textes
verschiebt sich unter das Menue auf der linken Seite.
Auf einem Mobil-Browser mit einer Breite < 640 Pixeln kann dieses
Verhalten mit dem Menü nicht mehr passieren, weil ein Menü bei so einer
schmalen Seite keinen Sinn mehr ergibt. Hier passiert es aber immer
noch, daß das Bild beim Zoomen aus dem Viewport wandert.
Und aus irgendeinem Grund finde ich keine "best practices", wie man
dieses ungewünschte Verhalten verhindern kann.
Viele Grüße
W.T.
Edit: Im Browser scheint das nicht besonders gut angezeigt zu werden.
Deswegen habe ich es noch einmal woanders hinterlegt:
http://dl1dow.de/testseite_mobil.htm
OK, jetzt habe ich das Problem so weit eingegrenzt, daß es nur noch
relativ große Tablets betrifft, indem bei Viewport-Breiten unter
640Pixeln alles einspaltig bleibt.
Bei diesen Tablets ist das nervige Verhalten, daß sich alles unter die
DIVs mit "position:fixed" schiebt aber immer noch vorhanden.
Weiterhin bleibt auch das Problem bestehen, daß beim Zoomen zentrierte
Bilder nachher außerhalb des Bildschirms sind. Hier unterscheiden sich
Mobil- und Desktopbrowser massiv.
Interessanterweise finde ich zu dem merkwürdigen Zoomverhalten bei
Mobilbrowsern kaum Informationen im Netz. Vielleicht habe ich einfach
nicht die richtigen Suchbegriffe.
Gibt es hier niemanden, der auch eine Website betreibt, ein Tablet oder
Smartphone besitzt und auf dieses Problem auch gestoßen ist?
Viele Grüße
W.T.
Walter Tarpan schrieb:> Gibt es hier niemanden, der auch eine Website betreibt, ein Tablet oder> Smartphone besitzt und auf dieses Problem auch gestoßen ist?
meine webseite liefert nur einen gepfegten 404 aus da ich meinen
webspace für alles mögliche nutze - nur nicht um eine webseite zu
betreiben.
egal
ich betreibe zwar keine webseite, arbeite aber in der branche. du kannst
dir das ganze layout inkl. media-query-unterscheidungen etc. selber
bauen (abhängig vom gesamtlayout eher aufwändig) oder du greifst auf ein
fertiges framework zurück, das dir beim layout unter die arme greift.
dazu würde ich foundation oder bootstrap empfehlen. jquery mobile ist
hier eher ungeeignet, da das (praktisch ausschließlich) auf reine
mobile-anwendungen ausgelegt ist. da die zwei ersten frameworks komplett
mit prozentuellen breiten arbeiten und zudem noch die anzeige
verschiedener elemente je nach device und größe unterstützen hast du
damit schon etwas gewonnen.
für icons werfe ich mal fontawesome ins rennen, damit hast du sprite-
und retina probleme zumindest für die icons eliminiert.
für die anzeige verschiedener bildgrößen für verschiedene auflösungen
gibt es z.b. foundation interchange, damit kannst du je nach auflösung
das jeweils passend(st)e bild anzeigen, die anderen bilder werden nicht
geladen (spart ladezeit, datenvolumen, ...)
die zoom-problematik wirst du allerdings auch nicht mit frameworks in
den griff bekommen. zoomen am mobilgerät ist nichts anderes wie z.b. die
verwendung einer lupe - die musst du auch bewegen um einen anderen teil
des bildes das du grade betrachtest vergrößern zu können.
änderungen der schriftgröße sind damit jedoch abgedeckt (wenn auch alle
möglichen nebeneffekte auftreten können)
anonym schrieb:> die zoom-problematik wirst du allerdings auch nicht mit frameworks in> den griff bekommen.
OK, damit hilft mir ein Framework bei meiner Fragestellung auch nicht
weiter. Aber selbst wenn: Eigentlich wäre es mir lieber, das Ganze in
normalem HTML/CSS geregelt zu kriegen, als alles auf ein Framework
umzukrempeln. Bislang wäre ein Framework für die paar Seiten einfach mit
Kanonen auf Spatzen geschossen.
Viele Grüße
W.T.
