0

我已经阅读了大量的 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;) {
  ...
}

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

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

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

谢谢！:)

编辑

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

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

4

4 回答 4

0

将您的视口更改为：

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

你还有问题吗？

于 2013-10-15T01:41:38.530 回答
0

原来我需要将我的 css 查询更改为：

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

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

于 2013-10-18T16:59:43.220 回答
0

尝试这个：

@media screen and (max-width : 480px) { /* change to your breakpoint */
 ...
}
于 2013-10-14T22:14:19.430 回答
0

Do you find any difference once you change your media query from:

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

To

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

Are you sure you want to use max-device-width and not the max-width (targeted display area)?

于 2013-10-15T00:25:56.183 回答