移动设备上的媒体查询不起作用。

Question

类似的问题之前已经在这里问过，但是读完它们后，我还没有找到适用于我的站点的答案。

我使用Bootstrap构建了网站，但添加了一些自己的媒体查询。实时测试网站位于： http://agoodman.com.au

受媒体查询更改的部分是“我们的费用”和“地图”覆盖层。如果您在笔记本电脑上，调整浏览器大小会使这些部分显示为块。

我的样式表链接：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/user.css" rel="stylesheet">

"

“User.css”只是一个单独的文件，因为我想随时保留和更新bootstrap的主要框架。User.css覆盖了bootstrap中的样式。我在user.css中使用的媒体查询如下：

"

@media screen or handheld(max-width: 979px) {
    .fee-buttons {
        height: auto;
        font-weight: 600;
        position: relative;
        padding: 0;
        margin: 0;
        list-style: none;
        }

    .fee-buttons .transformation {
        width: 100% !important;
        height: 300px;
        position: relative;
        z-index: 10;
        left:0;
        }

    .fee-buttons .hourly, .fee-buttons .membership {
    float: none;
    width: 100% !important;
    }

    li.button{
    overflow:visible;
    }

}

@media screen or handheld(max-width: 995px) {
    #overlay {
        position: relative;
        display: block;
        width: auto;
        right: 0;
        padding:1em;
    }
}

如我所说，在桌面浏览器上，这个页面可以正常工作，但在移动端浏览器上却完全无法正常运行。我已经在 iPhone 4（使用 Safari）和 HTC Desire（使用默认的 Android 浏览器）上进行了测试，两者都以相同的方式显示 - 忽略媒体查询，只显示满屏幕的压缩和不美观的内容。

有什么想法吗？我在这里做错了什么？

编辑：

以下是应该在小屏幕宽度下看起来的样子的截图： 以下是在 Android 和 iPhone 上当前的外观，设备忽略了我的媒体查询：

- JVG

---

你的网站在Safari on OS X和Safari on the iOS 4.3模拟器上看起来完全一样。对我来说，查询看起来很好。 - Torsten Walter

这是我在我的Android手机上看到的屏幕截图：http://i.imgur.com/PWmbO.png 当我们在iPhone 4上测试时，得到了相同的结果。 - JVG

Answer 1

抱歉回答自己的问题，但我找到了有效的解决方法。

设置媒体查询时出现错误。我将查询从

@media screen or handheld(max-width: 995px)

更改为

@media handheld, screen and (max-width: 995px)

正如这个人所建议的那样：https://dev59.com/QHVC5IYBdhLWcg3wixw0#996820 它在所有设备上都完美地运行。感谢那些提供建议的人，向你们所有人点赞。

- JVG

---

我现在只是来验证CSS，并且事后看到了你的答案。对于这种情况，验证可能是正确的方式，因为很多错误都归结为缺少或多余的字符 :) http://jigsaw.w3.org/css-validator/ - Torsten Walter

Answer 2

显示完整的网站，但是内容非常挤在一起，不太美观。这可能是由于您的媒体查询针对宽度为979和995像素的大屏幕目标设备，而移动屏幕要小得多。要针对诸如iPhone 4之类的设备，需要横向的max-width为960px（这就是为什么Bootstrap的默认值为960）和纵向的480px。由于无法针对所有可能的屏幕尺寸进行调整，因此Bootstrap提供了一个合理的默认宽度列表，建议您也遵循这些宽度。

- Torsten Walter

---

等一下，我可能对媒体查询的工作方式感到困惑。如果我将查询设置为max-width: 995px，那么这是否意味着内在样式将适用于任何宽度等于或小于995px的浏览器？这就是我想实现的，以便从1px-995px的浏览器宽度施加媒体查询。 - JVG

为了更清晰地表达，我在初始帖子中添加了一些截图。 - JVG

你是对的。查询中的 max-width 意味着任何更小的尺寸都将使用此样式。有趣的是，在桌面版 Safari 上，如果窗口宽度较小，则页面看起来像你第二张截图中的样子。 - Torsten Walter

是的，我也注意到了，突然间。当我在Chrome的检查元素中查看时，它根本不显示媒体查询的样式。它肯定加载了正确的CSS表格，所以我不知道出了什么问题。你可以在这里看一下：http://agoodman.com.au/css/user.css，在底部看到任何有关媒体查询的问题吗？ - JVG