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

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覆盖引导程序中的样式.我在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

它在所有设备上都能很好地工作.感谢那些提出建议的人,对所有人赞不绝口.