CSS媒体查询不起作用

Question

在移动设备（iPhone）上检查我的网站时，很明显它仍在加载非移动样式表。 这是标题中的代码，有人可以告诉我什么地方不对吗？

<link rel="stylesheet" href="styles.css" type="text/css" /> <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="styles_mobile.css" />

<script type="text/javascript" src="js/jquery.js"></script>

<script src="js/onclick.js" type="text/javascript"></script>


<script>

if (screen && screen.width > 480)
document.write('<script type="text/javascript" src="js/jqFancyTransitions.js"><\/script>');

</script>

为什么不按预期使用“ styles_mobile.css”？

在任何回复中，请注意，我对javascript的了解有限

Answer 1

我认为它需要一个meta视口标签：

http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

这意味着使用设备宽度，而不是设备中浏览器报告的宽度，该宽度更大。

从技术上讲，要按书进行媒体查询，您需要在元素中添加“ media”属性，或在CSS中添加@media条目。