hallo liebes forum,

ich bin neu hier und habe eine brennende frage auf den lippen welche über das thema "media queries" etwas sagen bzw. fragen möchte.

mein mobiles gerät: samsung galaxy s2 (480x 800)

1) ich habe ein mobiles design einer website vor mir welches in der maximalen höhe 375px hoch ist. mein problem was sich mir nun stellt ist: ich habe dieses design umgesetzt - jedoch scheint das design höher als mein bildschirm zu sein, so 50-60px. woran liegt das? mein samsung s2 hat doch eine höhe von 480px (querformat)!?!?!?

2) welche einstellungen nimmt man für gewöhnlich für eine mobile seite und eine tablet seite!?

3) was hat es mit dem "viewport" auf sich und wann sollte man "width" und wann "width-device-width" nehmen? ich habe schon viele gelesen, aber iwie doch noch nirgends lesen können wann man was nimmt!?

4) wann schreibt man z.B. (achten auf only):

ich hoffe ihr könnt mir einige fragen beantworten...würde mich darüber sehr freuen.

liebe grüße
supreme

Siehe auch Media Queries.

Ob eine Webseite vollständig angezeigt werden kann ist nicht von der Größe des Displays sondern von der Größe des Viewports abhängig.

Wenn die Displaygröße 480x800 lautet, dann musst du davon die Größe der Bedienelemente des Geräts abziehen (etwa Scrollbalken, Adressleiste usw). Was dann übrig bleibt um die Webseite darstellen zu können nennt man Viewport.

Der Viewport ist im Grunde wie ein Fenster in der Wand, du siehst einen Ausschnit von dem, was sich draußen befindet, und je nachdem, wie du dich bewegst (scrollst) siehst du einen anderen Ausschnitt.

device-width und device-height beziehen sich auf die Größe des Displays.
width und height beziehen sich auf die Größe des Viewports, sind also viel interessanter.

Das Schlüsselwort only hat nur eine Funktion: Die Medienabfrage vor Browsern zu verstecken, die Mit MQs nicht umgehen können.

__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.

device-width kann auch sehr interessant sein, z.B. zum Erkennen von mobilen Ausgabegeräten (iPhone & Co), falls deren gesendeter User Agent geändert wurde, so dass sie nicht mehr als z.B. iPhone erkannt werden (kann z.B. bei Geräten der Fall sein, die Firmen an ihre Mitarbeiter ausgeben).

Oder falls man z.B. keinen (ausreichenden) Zugriff auf den PHP-Code hat und dadurch kein Browser-Sniffing betreiben kann

Diese Erkennung per CSS verträgt sich auch gut mit Desktops, denn selbst das relativ große iPad gibt im Landscape-Modus als device-width nur 768px an (device-width bezieht sich immer auf die Breite in Standard-Ausrichtung, d.h. Portrait).

Auch für spezielle Grafiken (z.B. ein mehr oder eben weniger riesiges body-Hintergrundbild) finde ich device-width passender als width, da width zu ständigem Nachladen neuer Grafiken führen würde, sobald sich die Viewport-Breite entsprechend ändert.

Aber nichtsdestotrotz ist für die meisten Anwendungsfälle tatsächlich width der interessantere Wert.

__________________
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.)