Mobile CSS-Datei wird nicht geladen

Ich verwende drei separate Stylesheets mit verschiedenen Medienabfragen, um meine Website auf verschiedenen Bildschirmgrößen passend zu laden, aber ich kann nicht scheinen, das mobile Stylesheet (max-width: 480px) zu bekommen laden überhaupt. Stattdessen wird das Stylesheet (max-width: 1000px) geladen.Mobile CSS-Datei wird nicht geladen

Hier ist, wie sie in den HTML-Code dargestellt werden

<link rel="stylesheet" type="text/css" href="/CSS/page_style.css" media="screen"> 
    <link rel='stylesheet' type="text/css" href='/CSS/page_narrow.css' media='screen and (max-width: 1000px) and (min-width: 481px)'> 
    <link rel='stylesheet' type="text/css" href='/CSS/page_thin.css' media='screen and (max-width: 480px)'>

EDIT - Ich habe gerade versucht, mit den Darstellungs Meta-Tags und arbeitet. Danke Leute, an denen ich seit ein paar Tagen festhielt!

Quelle

2016-06-09 Ed Lewis

Wie testen Sie Ihre Arbeit? Verwenden Sie etwas wie den Geräteemulator von Chrome? – Brayniverse

Sie verwenden absolute Pfade, sind Sie sicher, dass "/CSS/page_style.css" richtig geladen wurde? – Marcandria

Fügen Sie Ihrem Dokument das [Viewport-Metatag] (http://stackoverflow.com/questions/14775195/is-the-viewport-meta-tag-really-necessary) hinzu? – Turnip

Schreiben, weil sich niemand Zeit genommen hat, eine Antwort zu posten.

Das Problem ist, es sei denn viewport meta tag hinzugefügt wird, mobile Browser simulieren in der Regel 980px breiten Displays, so dass sie Ihr Stylesheet für 481-1000px geladen laden.

Wenn Sie width=device-width einrichten, wird die Bildschirmbreite des tatsächlichen Geräts verwendet.

komplette Code - in den <head> folgende Zeile:

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

Quelle

2016-06-09 15:34:56 pzmarzly

Mobile CSS-Datei wird nicht geladen

Antwort

Verwandte Themen