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

（我最初只在我的元视口内容中有前两个（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 ......它们都不起作用。

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

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

谢谢！：）

修改

以下是我的mobile-style.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) {
  ...
}

您确定要使用max-device-width而不是max-width（目标显示区域）吗？

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创建了一个查询。

CSS媒体查询在Dolphin浏览器中工作，但不适用于Chrome或Safari？

4 个答案: