|
|||
![]()
Hallo Forum,
ich habe jetzt schon ein wenig mit CSS rumprobiert und geübt und wollte nun mal auf meinem iPhone testen, die CSS die ich dazu geschrieben habe greift auch ganz gut aber immer die Datei auf meinen Webspace laden und am iPhone aktualisieren nervt. Deswegen hab ich mir diese Chrome-Extension geladen: http://goo.gl/hUrx5 sie ändert eben die Größe des Fenster, doch wenn ich diese auf die iPhone 4 Auflösung stelle (960 x 640, bzw. irgend etwas dazwischen) und aufrufe, greift der entsprechende CSS-Teil nicht. Code:
body { margin: 0px; background-color: black; } p { font-size: 22px; font-weight: bold; margin: 0px; } #top-menu { width: 100%; height: 120px; position: relative; } .le-button { width: 250px; height: 110px; border-radius: 5px; background-color: red; margin-top: 5px; margin-right: 5px; margin-left: auto; float: right; } @media only screen and (min-device-width: 320px) and (max-device-width: 639px) { /* Hier der CSS Code für Smartphones wie z.B. iPhone, Android, WebOS, Windows Phone 7 Geräte o.Ä. */ #top-menu { background-color: yellow; } } /* Computer und Tablet CSS */ @media only screen and (min-device-width: 800px) { /* Hier der CSS-Code für Tablets und Computer ab einer mindest Bildschirm Weite von 800 Pixeln */ #top-menu { background-color: orange; } } HTML-Code:
<!DOCTYPE html> <html> <head> <title>myPlace</title> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <div id="top-menu"> <div class="le-button"></div> </div> </body> </html> Wer es mal selbst probieren möchte: http://http://goo.gl/ZyIYS Vielen Dank schon mal für eure Tipps ![]() Geändert von Tony-S (10.01.2012 um 12:57 Uhr) |
Sponsored Links |
|
|||
![]()
Nimm nicht min-device-width für die Media-Queries, sondern min-width. Du willst doch nicht nur Geräte ansprechen, sondern (auch) Viewportgrößen (das ist etwas anderes als eine Bildschirmgröße).
Das dann noch mit dem Viewport-Meta-Element kombinieren. Combining meta viewport and media queries - QuirksBlog
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
![]()
Danke das klappt, auch mit dem resizen - aufm iPhone schauts zwar jetzt bissl riesig aus aber warum find ich auch noch heraus
![]() Der Artikel ist übrigens auch gut, den arbeite ich morgen mal durch. |
![]() |
Stichwörter |
css, handy, iphone, smartphone |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
iPhone Navigation - neues Vergleichsportal jetzt testen | mk-gfx | Site- und Layoutcheck | 1 | 01.08.2009 23:59 |
Ajax Formular mit Weiche? | Zen5656 | Javascript & Ajax | 7 | 04.10.2007 18:28 |
Grafik richtig positionieren?! | Pumpkin | CSS | 7 | 13.06.2007 23:43 |
Testen per Browsercam | NinaG | Barrierefreiheit | 0 | 17.10.2006 12:59 |
IE zeigt falsch, FF richtig - change - FF zeigts falsch, IE richtig | nick | CSS | 6 | 19.08.2006 03:02 |