Ich habe viele Websites gesehen, die sowohl auf Desktop-Browsern als auch auf Handy-Browsern reagieren. Ich arbeite an einer Website und habe das folgende Stylesheet-Setup: (Die Hicks Design-Website ist ein gutes Beispiel dafür, was ich erreichen möchte, wenn Sie eine benötigen )

/* Normal styles go here */

@media screen and (min-device-width:321px)
{
    /* Styles */
}
@media screen and (min-width:701px)
{
    /* Styles */
}
@media screen and (min-width:1025px)
{
    /* Styles */
}
@media screen and (min-width:2049px)
{
    /* Styles */
}

Mein Stylesheet oben scheint jedoch nur auf Desktop-Browsern zu funktionieren. (Getestet mit Android Firefox und dem Standard-Android-Browser auf einem Sony Xperia Ray)

Die Regeln der Hicks-Design-Site sind meinen sehr ähnlich, nutzen jedoch min und max, aber für mich scheint dies nicht sowohl auf mobilen als auch auf Desktop-Browsern zu funktionieren. (Ich plane, meine Medienabfragen weiter zu optimieren. Ich versuche nur, die Grundlagen so zu gestalten, wie ich sie im Moment haben möchte.)

Wenn ich Max-Device-Width anstelle von Max-Width verwende, reagiert es auf mobilen Browsern, aber nicht auf Desktop-Browsern.

Ich habe Folgendes versucht, um das Problem zu umgehen:

@media screen and (max-width:480px), screen and (max-device-width:480px)
{
    /* Styles */
}

ebenfalls:

@media screen and (max-width:480px), and (max-device-width:480px)
{
    /* Styles */
}

Ich glaube jedoch nicht, dass beides korrekt ist, da sich die Webentwickler-Symbolleiste für Firefox darüber beschwert. Ich habe auch ein paar Variationen der oben genannten Regeln ausprobiert, kann sie aber immer noch nicht zum Laufen bringen.

Nach meinem Verständnis liest max-width die Breite des Ansichtsfensters (z. B. die Breite des Browserfensters) und max-device-width die tatsächliche Breite des Bildschirms, den Sie zum Anzeigen der Site verwenden. - Ich bin verwirrt, warum max-width die Browserbreite des Handys nicht zu lesen scheint.

Ich denke, ich vermisse hier möglicherweise etwas Offensichtliches in Bezug auf Medienabfragen ... Es scheint nicht sinnvoll zu sein, dass ich eine Kopie aller meiner Medienabfragen erstellen und einfach ändern muss, wenn meine Website auf Desktop- und mobilen Browsern reagieren soll die Abfrage von 'screen and (max-width)' nach 'screen and (max-device-width)' oder umgekehrt. (Wofür ich mich schäme, dass ich es hier sogar als Workaround tippe)

Wie kann ich die Regeln (max-width) und (max-device-width) kombinieren oder wie kann ich dies erreichen?

Wenn Sie nicht alles lesen möchten:

Ich benutze @media screen und (max-width: 480px) aber es scheint nur @media screen und (max-device-width: 480px) funktioniert auf Handys. Wie kann ich diese beiden Regeln kombinieren, um auf mobilen und Desktop-Browsern ein ansprechendes Design zu erzielen?