4

以前在这里提出过类似的问题，但在阅读完这些问题后，我还没有找到适用于我的网站的答案。

我已经围绕 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”只是一个单独的文件，因为我希望能够根据需要保留和更新引导程序的主框架。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 浏览器）上进行了测试，两者都以相同的方式显示 - 忽略媒体查询，只显示包含大量内容的完整网站.

关于我在这里做错了什么的任何想法？

编辑：

以下是在小屏幕宽度下应该是什么样子的屏幕截图：在此处输入图像描述

以及它目前在 Android 和 iPhone 上的样子，设备忽略了我的媒体查询：在此处输入图像描述

4

2 回答 2

8

很抱歉回答我自己的问题，但我发现了一些有用的东西。

我设置媒体查询的方式有误。代替

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

我将查询更改为

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

正如这个人所建议的那样：https ://stackoverflow.com/a/996820/556006

它在所有设备上都能完美运行。感谢那些提出建议的人，向你们所有人投赞成票。

于 2012-07-26T01:02:21.070 回答
1

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

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

要定位像 iPhone 4 这样的东西，你需要一个max-width（960px这就是为什么引导程序默认为 960）用于横向和480px纵向。

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

于 2012-07-25T23:50:56.867 回答