CSS Media Query 在 Dolphin 浏览器中工作，但不能在 Chrome 或 Safari 中工作

Question

我已经从 stackoverflow 和谷歌的各种网站上做了很多阅读，但我还没有找到解决方案。 :(

我的标题中有：

<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" />

（

我最初在我的元视口内容中只有前两个（宽度=设备宽度，初始比例=1.0），但在阅读一些文章后添加了后两个。

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

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

我也在这里尝试了最大设备宽度，它一直是 320、480、600 和 680......它们都不起作用。

我可以使用海豚浏览器（但不是Chrome浏览器）在我的xperia Z上查看此移动样式表，也可以在我朋友的iPhone 3GS上查看。 在其他地方，它没有出现。 目标只是针对任何较小尺寸屏幕设备的当前站点的简单移动布局。

让我知道我是否应该提供更多信息。

谢谢！ :)

编辑

这是我的移动风格.css文件的要点：https://gist.github.com/melissanoelle/7043032

很抱歉耽搁了，我在参加祖父葬礼的路上离开了电脑。 :(

Answer 1

试试这个：

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

Answer 2

从以下位置更改媒体查询后，是否发现有任何区别：

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

自

@media all and (max-device-width: 568px) {
  ...
}

是否确实要使用最大设备宽度而不是最大宽度（目标显示区域）？

Answer 3

将视口更改为以下内容：

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

你还有问题吗？

Answer 4

事实证明，我需要将我的 css 查询更改为：

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

我去掉了分号，并为max-width和max-device-width创建了一个查询。