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條目。