|
|||
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 |
Sponsored Links |
|
|||
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 |
Sponsored Links |
|
|||
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 |
|
||||
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.) |
|
|||
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 13:37 Uhr) |
Stichwörter |
mobile browser anzeige |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Mitwachsende Container: 4 Boxen | Cu Chullain | CSS | 1 | 08.09.2010 18:57 |
Unterforen für mobile Geräte? | Robin | Fragen, Konstruktive Kritik, Lob / Bekanntmachungen | 15 | 19.11.2007 16:34 |
XHTML/CSS für mobile Geräte, Kompendium, Wiki, ...? | Robin | Ressourcen | 4 | 28.10.2007 00:02 |
3 Boxen nebeneinander im Browser zentriert. | franz | CSS | 5 | 15.01.2006 20:19 |