XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Mobile-Browser schneiden Boxen ab (http://xhtmlforum.de/showthread.php?t=70185)

Mischka 28.10.2013 04:39

Mobile-Browser schneiden Boxen ab
 
Moin,
habe gerade ein Layout gebaut, welches später auch auf mobilen Geräten (Android, ipad, ...) laufen soll.
Da ich noch nie auf mobile Browser optimiert habe habe ich keine Ahnung wie ich mein Problem lösen soll.

Die obere große und die untere kleine hellgraue Box werden in mobilen Browsern nach zwei dritteln der breite abgeschnitten. Es sollte aber so aussehen wie auf einem aktuellen Desktop-Browser. Was mache ich falsch?

Habe die Datei mal auf meinen Webspace hochgeladen: hier

http://i4.minus.com/ibo1jNDAMWSZnK.png

MrMurphy 28.10.2013 06:28

Hallo,

ein starres Layout (mit festen Größenangaben wie px) passt nicht zu verschieden großen Bildschirmen / Viewpoints.

Zudem solltest du das Layout "responsive" (Mamma Google hilft: Responsive Design) machen.

Gruss

MrMurphy

heiko_rs 28.10.2013 10:19

Zitat:

Zitat von Mischka (Beitrag 534597)
Die obere große und die untere kleine hellgraue Box werden in mobilen Browsern nach zwei dritteln der breite abgeschnitten. Es sollte aber so aussehen wie auf einem aktuellen Desktop-Browser. Was mache ich falsch?

Du produzierst mehrere Überbreiten, z.B. .formation mit 1200px und .caroufredsel mit 1068px (letzteres Element wird allerdings durch overflow: hidden; von .caroufredsel_bg abgeschnitten).

Ebenfalls nicht sinnvoll ist right: -180px; von #home_skyscraper, und das auch noch mit seinem eh schon 1200px breiten Containing Block.

Du kannst Dein Layout ganz leicht auf dem Desktop testen, indem Du den Viewport schmalziehst - dabei darf nichts ungewollt abgeschnitten werden und es darf auch keine horizontalen Scrollbalken geben.

Haut das alles hin, wird Deine Seite auch auf mobilen Geräten laufen, sofern sie wissen, wie sie Deine Seite behandeln sollen.

Ihr Standard-Verhalten ist nämlich die Darstellung der Seite innerhalb ihres virtuellen default-Viewports - der bekannteste Wert ist der von iPhone & iPad mit einer Breite von 980px. D.h. diese Geräte stellen die Seite de facto in einem 980px breiten Viewport dar, zoomen sie dann aber so klein, dass sie (horizontal) in ihren tatsächlichen Viewport (d.h. ihr Display) passt, der natürlich eine geringere Breite hat (wobei man dabei noch zwischen "CSS-Pixeln" und "Device-Pixeln" unterscheiden muss, aber das würde jetzt zu weit führen). Dadurch wirken die meisten Seiten erstmal winzig und man muss sie ranzoomen und anschließend seitlich verschieben, um alle Inhalte sehen zu können.

Dieses Standard-Verhalten änderst Du durch:

HTML-Code:

<meta name="viewport" content="width=device-width, initial-scale=1">
Theoretisch bräuchte man nur width=device-width, denn das sagt dem Gerät, dass es einen virtuellen Viewport verwenden soll, der genauso breit ist wie sein Display, egal ob im Landscape- oder Portrait-Mode.

Allerdings weicht hier das Verhalten von Apple-Geräten ab, denn diese geben als device-width immer die kurze Seite wieder (analog für device-height die lange), lassen sich aber glücklicherweise durch Hinzunahme von initial-scale=1 zu einem allen übrigen Geräten entsprechenden Verhalten bewegen.

Damit verbunden ist übrigens ein Fehler, der im Internet enorm verbreitet ist: Es gibt zahllose Tipps für media queries wie (max-)device-with: 1024px "for iPad landscape" und (max-)device-with: 768px "for iPad portrait" - was eben falsch ist, denn das iPad gibt auch im Landscape-Mode 768px als device-with zurück. Analoge Tipps gibt es auch für das iPhone, das sich aber nach dem gleichen Prinzip wie das iPad verhält. Subjektiv lese ich diesen Sachverhalt leider öfter falsch als richtig :lol:

Ebenso weit verbreitet ist die Ergänzung des meta-Elementes um maximum-scale=1 und user-scalable=no - sowas bitte nie machen! Es ist ein Relikt aus Zeiten des Apple Rotation Bugs, den es aber nicht mehr gibt, also weg mit solchem Unsinn, der heutzutage nur noch bewirkt, dass die meisten Nutzer die Seite nicht mehr zoomen können.

So, eigentlich wollte ich gar nicht so viel schreiben, aber da man zu diesem Thema über Google eben leider auch viel Unsinn findet (wie gesagt), habe ich halt mal etwas weiter ausgeholt :lol:

gaby 28.10.2013 11:56

Toller Beitrag, Heiko, vielen Dank!! :)

Als smartphone-loser User hing ich da bisher ziemlich in der Luft, und Freunde und Bekannte wollte ich nicht ständig anbetteln, mir ihr Gerät zum Testen zu leihen. ;)

Grüße
gaby

heiko_rs 28.10.2013 12:19

Wenn Du Deine media queries auf max-/min-width schreibst (in px oder gerne auch em), was auf jeden Fall sinnvoller ist als (min-/max-)device-width, bist Du mit dem Desktop-Browser schon sehr safe - d.h. wenn nichts abgeschnitten wird und es auch keine horiz. Scrollbalken gibt, wirst Du beim finalen Test auf Smartphones & Tablets etc. in der Regel auch keine Überraschungen erleben :) (abgesehen von speziellen Dingen wie (background-)position: fixed;, overflow: auto/scroll oder 100% Viewport-Höhe etc., denn dabei verhalten sich einige Mobilgeräte/-browser anders als der übliche Desktop-Browser.)

Desktop hat hier sogar den Vorteil, dass Du problemlos wirklich jede Viewport-Breite checken kannst, z.B. von 1280px stufenlos runter bis 180px, und damit hast Du dann wirklich alles abgedeckt, was der mobile Markt so hergibt :)
(aber ein finaler Test auf mobilen Geräten ist natürlich trotzdem Pflicht, also zumindest dafür solltest Du Dir dann doch mal was leihen.)

Mischka 28.10.2013 13:34

vielen Dank.
Habe den viewport auf 1250px gemacht und den banner rechts bei einer kleineren breite ausgeblendet.
Funktioniert und sieht Super aus.


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:13 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023