媒体查询无法在移动设备上运行

Question

之前已经在这里提出了类似的问题，但在阅读完之后我还没有找到适合我网站的答案。

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

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

我的样式表链接：

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

＆＃34; User.css＆＃34;只是一个单独的文件，因为我希望能够在必要时保留和更新bootstrap的主框架。 User.css覆盖引导程序中的样式。我在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和iPhone上看起来如何，设备忽略了我的媒体查询：

Answer 1

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

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

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

我将查询更改为

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

按照这个家伙的建议：https://stackoverflow.com/a/996820/556006

它在所有设备上都运行良好。感谢那些提出建议的人，对所有人都赞不绝口。

Answer 2

  

显示完整的网站，其中包含许多非常压扁且不讨人喜欢的内容。

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

要定位类似iPhone 4的内容，您需要max-width 960px（这就是为什么bootstraps默认为960）for landscape和480px for portrait。

由于您无法定位所有可能的屏幕尺寸，因此bootstrap提供了一个合理的默认宽度列表，您也应该坚持使用。