CSS 媒体查询在 Dolphin 浏览器中有效，但在 Chrome 或 Safari 中无效？

Question

我已经阅读了大量 stackoverflow 和 google 的各种网站，但我还没有找到解决方案。 :(

我的标题中有:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
...
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mobile-style.css" />

(我最初在我的元视口(viewport)内容中只有前两个(width=device-width，initial-scale=1.0)，但在阅读一些文章后添加了后两个。)

在我的 mobile-style.css 文件中，我有:

@media only screen and (max-device-width: 568px;) {
  ...
}

我在这里也尝试过 max-device-width，它是 320、480、600 和 680……它们都不起作用。

我可以在我的 xperia Z 上使用海豚浏览器(但不是 Chrome 浏览器)和我 friend 的 iPhone 3GS 查看此移动样式表。在其他地方它不会出现。目标只是针对任何较小屏幕设备的当前站点的简单移动布局。

如果我应该提供更多信息，请告诉我。

谢谢! :)

编辑

这是我的 mobile-style.css 文件的要点:https://gist.github.com/melissanoelle/7043032

抱歉耽搁了，我在去参加祖父的葬礼时一直没有使用电脑。 :(

Answer 1

试试这个:

@media screen and (max-width : 480px) { /* change to your breakpoint */
 ...
}