CSS-Medienabfrage wird nicht auf Mobilgeräten angezeigt

Question

Ich bin neu, daher erwarte ich, dass es etwas Einfaches ist, das ich übersehen habe.

Die Website, die ich erstellt habe, reagiert auf die Medienabfragen, wenn die Größe des Fensters direkt in meinem Browser geändert wird. Die Website reagiert auf die Medienabfragen, wenn ich auf mein iPad schaue. Aber wenn ich auf mein Handy schaue, zeigt es eher die Tablet-Version als das Handy.

@media screen and (max-width: 767px) { 
.container { 
    width: 100%; 
} 
.logo { 
    background-position: 50% 30px; 
} 
.banner { 
    height: 500px; 
} 
.banner h1 { 
    margin-top: 0px;  
} 
.title { 
    background-color: #d44137; 
    width: 100%; 
    margin: 0; 
} 
.pricing h2 { 
    display: none; 
} 
.pricing { 
    width: 100%; 
} 
.pricing p { 
    width: 95%; 
} 
.pricing-1 { 
    margin-left: 0; 
} 
.pricing-1 p { 
    margin-left: 0; 
} 
.content { 
    width: 100%; 
} 
.sidebar { 
    width: 100%; 
} 
.testimonials { 
    width: 90%; 
    float: left; 
    margin: 0; 
    padding: 10px 5% 10px 5%; 
} 
.records { 
    width: 90%; 
    float: left; 
    padding: 10px 0 10px 5%; 
} 
.info { 
    width: 90%; 
    float: left; 
    text-align: justify; 
    padding: 10px 0 10px 5%; 
} 
.info img { 
    display: none; 
} 
.company { 
    width: 90%; 
    float: left; 
    padding: 10px 5% 20px 5%; 
} 
.video { 
    width: 90%; 
    float: left; 
    margin-left: 5%; 
    padding-bottom: 20px; 
} 
form { 
    width: 90%; 
    margin: 0 5% 30px 5%; 
} 
.map { 
    width: 90%; 
    margin: 0 5% 30px 5%; 
} 
.contact h1 { 
    margin-left: 5%; 
} 
.footer { 
    height: 70px; 
} 
.copyright { 
    font-size: 9pt; 
    text-align: center; 
} 
.social { 
    display: none; 
} 
} 

Etwas, das ich bemerkt, ist, dass es für mobile funktioniert, wenn ich max-device-Breite in der Medienabfrage statt max-width setzen, aber es funktioniert nicht, wenn ich meinen Browser-Bildschirm ändern. Ich habe auch gesehen, dass die Gerätebreite jetzt veraltet ist, also möchte ich sie nicht wirklich benutzen.

Irgendwelche Ideen?

Wirklich zu schätzen die Hilfe! :)

EDIT: Ich habe die letzte schließende Klammer verpasst, aber das hat nicht beeinflusst, wie es auf dem Handy aussieht. Danke, dass du das aufgehoben hast!

Answer 1

Sie vergessen geschweiften Klammern // @media Bildschirm und (max-width: 767px) zu schließen {

Answer 2

Fügen Sie einfach schließen geschweifte Klammer für Ihren @media Bildschirm und (max-width: 767px).

Answer 3

Sollte kein großes Problem sein, da Sie die Größe von Fenstern auf mobilen Geräten nicht ändern können. Führen Sie weitere Tests mit physischen Geräten durch und Sie könnten feststellen, dass dies kein Problem darstellt.

Auch die Vernachlässigung der Geräte-mit-Eigenschaft bedeutet einfach, dass es in einer zukünftigen Hauptversion entfernt werden wird, so dass es wahrscheinlich sicher ist, weiter zu verwenden, bis ein besserer Weg entsteht.

Answer 4

Stellen Sie sicher, dass Sie dies zu Ihrem HTML hinzugefügt haben.

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