zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mobile-Browser schneiden Boxen ab

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.10.2013, 04:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.07.2008
Beiträge: 32
Mischka befindet sich auf einem aufstrebenden Ast
Standard 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

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.10.2013, 06:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.076
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.10.2013, 10:19
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Mischka Beitrag anzeigen
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

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
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Geändert von heiko_rs (28.10.2013 um 14:53 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 28.10.2013, 11:56
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 28.10.2013, 12:19
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #6 (permalink)  
Alt 28.10.2013, 13:34
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.07.2008
Beiträge: 32
Mischka befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von Mischka (28.10.2013 um 14:37 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
mobile browser anzeige

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Mitwachsende Container: 4 Boxen Cu Chullain CSS 1 08.09.2010 19:57
Unterforen für mobile Geräte? Robin Fragen, Konstruktive Kritik, Lob / Bekanntmachungen 15 19.11.2007 17:34
XHTML/CSS für mobile Geräte, Kompendium, Wiki, ...? Robin Ressourcen 4 28.10.2007 01:02
3 Boxen nebeneinander im Browser zentriert. franz CSS 5 15.01.2006 21:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:53 Uhr.