2016-05-05 2 views
1

Ich habe 3 Medienabfragen in meinem CSS, die scheinen gut zu funktionieren, wenn ich die Größe des Browsers ändern, aber nicht, wenn ich das Responsive Design-Tool aus dem Inspektor ("toggle Gerätemodus") und auf Mobiltelefonen verwenden.Warum wird meine CSS-Medienabfrage von Mobiltelefonen ignoriert?

Hier ist ein Teil meiner CSS:

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


    body { 
    width: 100%; 
    } 
} 

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


    body { 
    width: 100%; 
    } 

    #slider_container { 
    float: none; 
    padding-top: 2em; 
    width: 75%; 
    display: block; 
    overflow: hidden; 
    padding-left: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    } 

    #slide_desc { 
    // 

    width: 30%; 
    display: block; 
    float: none; 
    margin-top: 0; 
    margin-left: auto !important; 
    margin-right: auto; 
    overflow: hidden; 
    font-size: 1.3em; 
    color: #353535; 
/* line-height: 2em; */ 
    text-align: justify; 
    font-family: georgia; 
    width: 80%; 
    } 
} 

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

    #slider_container { 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    padding-top: 1em; 
    } 

    #menu_button { 
    display: block; 
    width: 2em; 
    float: right; 
    margin-top: 0.5em; 
    margin-right: 2em; 
    cursor: pointer; 
    } 

    #top_menu { 
    overflow: hidden !important; 
    height: 3em; 
    /* background-color: gray; */ 
    } 

    #top_menu>ul { 
    margin-top: 3em; 
    width: 100%; 
    height: 0; 
    position: absolute; 
    z-index: 100; 
    overflow: hidden; 
    } 

    #top_menu>ul>li { 
    margin: 0; 
    /* background-color:red !important; */ 
    width: 100% !important; 
    display: block !important; 
    } 

    #top_menu>ul>li>a { 
    text-align: left; 
    width: 100%; 
    margin-left: 0; 
    padding-left: 1em; 
    height: auto; 
    } 

    #slides_container { 
    display: none; 
    } 
} 

Die ersten 2 Medienanfragen immer funktionieren, aber die 3. ignoriert wird. Die dritte Medienabfrage funktioniert nur, wenn der Browser selbst unter 768px in der Größe geändert wird.

Ich weiß, es gibt andere ähnliche Fragen, aber sind meist auf die Verwendung von !important oder Fehlplatzierung der Abfragen bezogen. Meine Abfragen sind am Ende der Datei, und was ist seltsam, sie funktionieren, wenn der Browser die Größe geändert wird.

Irgendwelche Ideen, warum dies passieren könnte?

+2

Setzen Sie das Ansichtsfenster auf 'content =" width = Gerätebreite, initial-scale = 1 "'? –

+0

Ich habe nur hinzugefügt, und jetzt funktioniert es gut. Obwohl ich keine Ahnung habe, was das ist. Kannst du das bitte mit einer Erklärung hinzufügen, damit ich deine Antwort annehmen kann? – vlatkozelka

Antwort

3

Sie müssen Ihr Viewport-Metatag auf content="width=device-width, initial-scale=1" setzen. Dies weist den Browser an, die Breite der Seite in der Breite des Gerätebildschirms darzustellen. Wenn der Bildschirm also 320 Pixel breit ist, ist das Browserfenster 320 Pixel breit, anstatt wegzuzoomen und 960 Pixel (oder was auch immer das Gerät standardmäßig tut).

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

Sie können mehr über die Ansichtsfenster-Meta-Tag lesen und wie es funktioniert here.

1

Weil Sie einen Syntaxfehler haben:

#slide_desc { 
    // 

Doppel-Schrägstriche in CSS nicht gültig sind.

+0

Nun, ich habe eine Suche nach '//' und ersetzt alle mit/* */auch entfernt, dass allein // Sie gefunden ... aber keinen Unterschied gemacht – vlatkozelka

+0

@vlatkozelka Der Code zur Verfügung gestellt, das ist das einzige Ding falsch damit. Und dieser Fehler hätte die fortgesetzte Verarbeitung des CSS-Dokuments gestoppt, was das Problem verursacht hätte, auf das Sie gestoßen sind. Nachdem diese Zeile entfernt und an http://jigsaw.w3.org/css-validator/ übergeben wurde, wird alles als gültig angezeigt. – Quantastical

+0

Ich weiß, dass Sie Recht haben, Ihre Antwort wird gut bemerkt. Ich habe nur gesagt, dass es nicht das Problem zu sein scheint. Ich denke, dass die Browser-Engine die Deklaration ignoriert, wenn sie einen Syntaxfehler findet und weiterleitet ... deshalb schien das // wie ein Kommentar zu funktionieren, und es war nicht klar, dass das nicht der Fall war. – vlatkozelka