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>

为什么这不使用＆＃34; styles_mobile.css＆＃34;按照预期？

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

Answer 1

我认为它需要一个元视口标记：

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

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

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