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.
:
Verschoben durch Moderator
versuchs mit einer "meta viewport" Anweisung im Head. http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen
IANAL schrieb: > versuchs mit einer "meta viewport" Anweisung im Head. > > http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen Der schlägt das hier vor:
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> |
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
:
Bearbeitet durch User
Angehängte Dateien:
-
Mobilbroswer.png
43 KB -
Desktopbrowser.png
25 KB
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.
Thread beobachten
Seitenaufteilung abschaltenBitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.