CSS媒体查询在Dolphin浏览器中工作，而不是Chrome或Safari？

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

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

我可以在我的xperia Z上使用dolphin浏览器（但不是Chrome浏览器）和我朋友的iPhone 3GS上查看此移动样式表。在其他地方它不会显示。目标只是为当前站点的任何较小屏幕设备提供一个简单的移动布局

如果我需要提供更多信息，请告诉我

谢谢！：）

编辑

以下是我的mobile-style.css文件的要点：

很抱歉耽搁了，我去参加我祖父的葬礼时离开了电脑（

试试这个：

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

---

更改媒体查询后，您是否发现有任何差异：

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

到

---

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

将视口更改为：

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

---

您仍然有问题吗？

我需要将css查询更改为：

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

---

我去掉了分号，为

max width

和

max device width

创建了一个查询，但仍然不起作用。我不明白为什么它可以在Dolphin浏览器中工作，但不能在Chrome中工作。我觉得有点奇怪。在

max device width

和

max width

之间没有区别。在我刷卡时没有区别来自

@仅媒体屏幕

、

@媒体屏幕

或

@媒体全部

的tch：（请共享您的css文件：mobile-style.cssI已将原始问题中的要点链接添加为编辑。很抱歉延迟。您认为我应该将视口更改为什么？很抱歉。这是处理响应性设计时的建议设置。）。

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

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