wake-up-neo.com

Warum funktionieren meine CSS3-Medienabfragen nicht auf Mobilgeräten?

In der Datei styles.css verwende ich Medienabfragen. Beide verwenden eine Variation von:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

Die Größe der Websites wird in einem normalen Browser (Safari, Firefox) an das gewünschte Layout angepasst, wenn ich das Fenster verkleinere. Auf einem Telefon wird das mobile Layout jedoch überhaupt nicht angezeigt. Stattdessen sehe ich nur die Standard-CSS.

Kann mich jemand in die richtige Richtung weisen?

158
redconservatory

Alle drei waren hilfreiche Tipps, aber anscheinend musste ich ein Meta-Tag hinzufügen:

<meta content="width=device-width, initial-scale=1" name="viewport" />

Jetzt scheint es sowohl auf Android (2.2)) als auch auf dem iPhone zu funktionieren ...

398
redconservatory

Vergessen Sie nicht, die Standard-CSS-Deklarationen zu haben oben die Medienabfrage oder die Abfrage funktioniert auch nicht.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}
53
The4thIceman

Ich vermute, dass das Schlüsselwort only das Problem sein könnte. Ich habe keine Probleme mit Medienabfragen wie folgt:

@media screen and (max-width: 480px) { }

21
Moin Zaman

ich habe bootstrap in einer Presseseite verwendet, aber es hat nicht auf IE8 funktioniert. Ich habe css3-mediaqueries.js Javascript verwendet, aber es funktioniert immer noch nicht. Wenn Ihre Medienabfrage mit dieser Javascript-Datei funktionieren soll, fügen Sie hinzu Bildschirm auf Ihre Medienabfragezeile in CSS

hier ist ein Beispiel :

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css Link line so einfach wie oben.

17
Mohsen

Heute hatte ich eine ähnliche Situation. Medienabfrage hat nicht funktioniert. Nach einer Weile fand ich, dass das Leerzeichen nach 'und' fehlte. Die richtige Medienabfrage sollte folgendermaßen aussehen:

@media screen and (max-width: 1024px) {}
13
dklog79

Stellen Sie sicher, dass Ihre CSS-Kommentare alle dieses Markup verwenden /* ... */ - das ist das richtige Kommentar-Markup für CSS gemäß MDN

Ich habe bootstrap 4 Medienabfragen direkt aus ihren Dokumenten kopiert und jede Abfrage ist mit dem gleichen JavaScript-Style-Kommentar-Markup // Gekennzeichnet!

Darüber hinaus erlaubte mir der IntelliJ-Texteditor, bestimmte CSS-Zeilen in einer WENIGER-Datei auszukommentieren, verwendete aber automatisch //. Es ist keine Freeware, also nahm ich an, dass es richtig war. Es gibt ein Einstellungsmenü zum Korrigieren dieses Verhaltens.

Überprüfen Sie Ihr CSS auch mit einem vertrauenswürdigen Online-Validator. Hier ist eine von W

2
Cameron Donahue
@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}
1
Ketam Srinivas

Für mich hatte ich angegeben, max-height anstatt max-width.

Wenn Sie das sind, ändern Sie es!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }
0
Ruto Collins

Ich benutze je ein paar Methoden. Im selben Stylesheet verwende ich: @media (max-width: 450px), oder stelle für separate sicher, dass du den Link in der Kopfzeile richtig hast. Ich habe mir Ihr Fixmeup angesehen und Sie haben eine verwirrende Reihe von Links zu CSS. Es wirkt wie du sagst auch auf HTC Desire S.

0
benteh

Dieses Problem ist auch kürzlich aufgetreten, und ich habe es später herausgefunden, weil ich kein Leerzeichen zwischen and und ( Eingefügt habe. Das war der Fehler

@media screen and(max-width:768px){
}

Dann habe ich es geändert, um es zu korrigieren

@media screen and (max-width:768px){
}
0
sdkcodes

Es kann auch vorkommen, dass die Zoomstufe des Browsers nicht korrekt ist. Der Zoom Ihres Browserfensters sollte 100% betragen. Verwenden Sie in Chrome Ctrl + 0, um die Zoomstufe zurückzusetzen.

0
Suhail AKhtar

Wirf eine andere Antwort in den Ring. Wenn Sie versuchen, CSS-Variablen zu verwenden, schlägt dies im Hintergrund fehl.

@media screen and (max-device-width: var(--breakpoint-small)) {}

CSS-Variablen funktionieren nicht in Medienabfragen (von Entwurf).

0
Seth