移动 CSS 文件未加载答案

【问题标题】：Mobile CSS file not loading移动 CSS 文件未加载
【发布时间】：2016-06-09 14:54:44
【问题描述】：

我正在使用具有不同媒体查询的三个单独的样式表以在各种屏幕尺寸下适当地加载我的网站，但是我似乎根本无法加载移动样式表（最大宽度：480px）。相反，它会加载 (max-width: 1000px) 样式表。

这是它们在 html 中的呈现方式

    <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)'>

编辑 - 我刚刚尝试使用视口元标记并工作。谢谢大家，我已经坚持了几天了！

【问题讨论】：

你如何测试你的工作？你在用 Chrome 的设备模拟器之类的吗？
您使用的是绝对路径，您确定“/CSS/page_style.css”加载正确吗？
您是否将viewport meta tag 添加到您的文档中？
我同意@Turnip，没有视口元标记，许多移动浏览器模拟 980px 宽的屏幕
我自己测试过代码；带有视口元标记和不带标记。我可以确认样式表仅在使用视口元标记时为我加载。

标签： html css mobile media-queries responsive

【解决方案1】：

写作是因为没有人花时间发布答案。

问题是除非添加viewport meta tag，否则移动浏览器通常会模拟 980 像素宽的显示，因此它们会加载为 481-1000 像素设计的样式表。

设置width=device-width 将使他们使用真实设备的屏幕宽度。

完整代码 - 添加到 <head> 下一行：

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

【讨论】：