Media-Queries - welche Auflösungen unterstützen

[dn3d_fanboy]

Hallo,

ich habe gerade wieder mal ein Brett vorm Kopf. UNd zwar möchte ich meine Website responsive gestalten. Jetzt ist die Frage, welche Auflösungen ich unterstützen soll?

Für Desktop- und Notebookmonitore ist mir ja schon soweit klar. Doch welche Auflösungen sol ich da am besten bei den Tablets und Smartphones unterstützen?

Habt ihr da Favoriten? Man kann ja nicht zig Mobilauflösungen, die ich bei meiner Googlesuche gefunden habe, anbieten.

Bis jetzt habe ich folgende (Desktop/Notebook-) Auflösungen:

1. Ab 1920px
2. Ab 1600 bis 1919px
3. Ab 1280 bis 1599px
4. Ab 1000 bis 1279px

Welche weiteren würdet ihr noch empfehlen?

Ich dake euch schonmal vielmals im Voraus.

 

[leveler]

Welche weiteren würdet ihr noch empfehlen?

Die Mozilla-Webdeveloper-Toolbar bietet folgende Ansichten:

Mobile portrait (320x480),
Mobile landscape (480x320),
Small tablet portrait (600x800),
Small tablet landscape (800x600),
Tablet portrait (768x1024),
Tablet landscape (1024x768)

woraus ich schliesse, dass die relevant sind.
Ansonsten schau doch mal in den Bootstrap-Code, wie da unterteilt wird.

 

[patrick_l]

/* --| Tablet |----------------------------- */
@media only screen and (max-width:768px){
}

/* --| Smartphone |------------------------- */
@media only screen and (max-width:480px){
}

Das ganze gegebenen Falls durch landscape und/oder portrait ergänzen. Man kann das ganze sicher noch weiter unterteilen. Angaben siehe Levelers Post.

LG Patrick

 

[cythux]

Dies ist die CSS Version, von Foundation aus der Dokumentation als die von Bootstrap

// Small screens
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */

ansonsten kannst du ja http://gs.statcounter.com/#all-resolution-ww-monthly-201311-201411 schauen welche Auflösungen verwendet werden oder hier vorbeischauen http://screensiz.es/phone

 

[_schatzi_]

Hallo!

Ich würde mich hier gar nicht von irgendwelchen vorgegebenen Werten leiten lassen!
Je nachdem, ob ich Mobile First oder Desktop First arbeite, ziehe ich mein Browserfenster größer bzw. kleiner, und beurteile höchst individuell, wann ein Breakpoint sinnvoll ist, also wann z.B. Zeilen zu lang/kurz werden, oder Bilder zu groß/klein, oder Spalten zu schmal/breit. Und wenn dieser Breakpoint dann bei "krummen" 823px ist, dann ist das eben so!

 

[cythux]

Hallo!

Ich würde mich hier gar nicht von irgendwelchen vorgegebenen Werten leiten lassen!
Je nachdem, ob ich Mobile First oder Desktop First arbeite, ziehe ich mein Browserfenster größer bzw. kleiner, und beurteile höchst individuell, wann ein Breakpoint sinnvoll ist, also wann z.B. Zeilen zu lang/kurz werden, oder Bilder zu groß/klein, oder Spalten zu schmal/breit. Und wenn dieser Breakpoint dann bei "krummen" 823px ist, dann ist das eben so!

Nicht den Browser skalieren, dadurch wird euch diese Seite nicht korrekt dargestellt, wie zb in den Entwicklertools in Chrome - dort werden diese richtig anzeigt bzw. Simuliert.
Durch das Skalieren passt der Webseite sich nur in der Breite an, die du vorgeben hast in deinen Mediaqueries, jedoch nicht nicht Höhe

 

[_schatzi_]

Durch das Skalieren passt der Webseite sich nur in der Breite an, die du vorgeben hast in deinen Mediaqueries, jedoch nicht nicht Höhe

Gibst du denn auch Höhen in deinen MediaQueries an???

edit: Sorry, jetzt hab' ich's auch geschnallt, was du meinst! Dieser Groschen brauchte etwas länger...

 

[patrick_l]

Nicht den Browser skalieren, dadurch wird euch diese Seite nicht korrekt dargestellt [...]

Eben, für den kleinen Kontrollblick zwischendurch sicher nicht so wild. Trotzdem sollte man für die genaue Anpassung und den Feinschliff anders vorgehen. Ich teste z.B. mit einer "iPhone-App" sowie einer Chrome Erweiterung (Responsive Web Design Tester).

Zusätzlich mit Tablet und Smartphone darauf zugreife. Einfach um zu schauen wie das Verhalten ist (klick & feel). Anhand der Tests dann Schaltflächen, Buttons und/oder Abstände erhöhe oder weiter reduziere. So das es optisch und von der Bedienung her harmoniert.

Auch wenn cythux eine ganze Latte an Media Queries gepostet hat, sollte man immer abwägen und schauen ob fürs eigene Projekt überhaupt alle notwendig sind. Bei einem komplexen Layout man davon eher Gebrauch macht, als es bei einem simplen der Fall sein wird.

Gibst du denn auch Höhen in deinen MediaQueries an???

Ganz vom Inhalt abhängig. Ich habe gerade ein Firmenportfolio als OnePage realisiert. Dort teilweise auch "fixe" Höhenangaben verwendet. Die meisten Bereiche sind aber ohne feste Höhenangaben.

LG Patrick

 

[dn3d_fanboy]

Leider etwas spät, aber dennoch vielen Dank für eure Antworten. Ich werde jetzt mal ein bisschen rumprobieren und gegebenenfalls nochmal "nerven", wenn irgendetwas nicht klappt.