Mobile 媒体查询在手机上不起作用

以前也有人问过类似的问题，但读完这些问题后，我还没有找到一个适合我的网站的答案

我已经围绕Bootstrap构建了这个站点，但添加了一些我自己的媒体查询。现场测试现场位于：

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

我的样式表链接：

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

正如我所说，在桌面浏览器上这很好，但在移动浏览器上它根本不起作用。我已经在iPhone4（使用safari）和HTC Desire（使用android股票浏览器）上进行了测试，两者的显示方式都是一样的——忽略媒体查询，只显示整个网站，其中包含大量令人不快的内容

你知道我做错了什么吗

编辑：

以下是小屏幕宽度下的应该是什么样子的屏幕截图：

以及安卓和iPhone上的当前外观，该设备忽略了我的媒体查询：

显示完整的网站，其中包含大量令人讨厌的内容

这可能是因为您的媒体查询以979和995像素宽的大屏幕为目标。移动屏幕要小得多

要瞄准像iPhone4这样的东西，你需要一个

maxwidth

的

960px

（这就是为什么引导默认值为960）用于横向，而

480px

用于纵向

---

由于您不能针对所有可能的屏幕大小，bootstrap提供了一个合理的默认宽度列表，您也应该坚持使用。

很抱歉回答我自己的问题，但我发现了一些行之有效的方法

我设置媒体查询的方式出错。而不是

@媒体屏幕或手持设备（最大宽度：995px）

我将查询改为

@手持媒体、屏幕和（最大宽度：995px）

正如这家伙所说：

---

它在所有设备上都能完美工作。多亏了那些提供建议的人，我向你们所有人投票。

对于我来说，在OS X上的Safari和在iOS 4.3模拟器上的Safari，你们的网站看起来完全一样。这些查询在我看来很好。下面是我的Android手机上的屏幕截图：当我们在iPhone4上测试时得到了相同的结果，我可能对媒体查询的工作原理感到困惑。如果我将查询设置为

max width:995px

，这是否意味着固有样式将应用于宽度等于或小于995px的任何浏览器？这就是我想要实现的，所以浏览器宽度从1px到995px传递媒体查询。为清晰起见，在最初的帖子中添加了一些屏幕截图。你是对的。查询中的

max width

表示任何较小的都将使用此样式。有趣的是，在带有小窗口宽度的桌面Safari上，页面看起来就像你的第二个屏幕截图。是的，我也突然注意到了这一点。当我查看Chrome的inspect元素时，它根本没有显示媒体查询的样式。它确实加载了正确的css表，所以我不知道发生了什么。你可以在这里看一看：看到底部的媒体查询有什么问题吗？我现在只是过来验证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;
    }
}