媒体查询不适用于移动设备

Posted 2023-03-06

【中文标题】媒体查询不适用于移动设备

【英文标题】：Media queries not working on mobile

【发布时间】：2012-07-24 11:59:28

【问题描述】：

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

我已经围绕 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 上的样子，设备忽略了我的媒体查询：

【问题讨论】：

您的网站在我看来在 OS X 上的 Safari 上和在 ios 4.3 模拟器上的 Safari 上完全一样。这些查询对我来说很好。

这是我的 Android 手机上的截图：i.imgur.com/PWmbO.png 在 iPhone 4 上测试时得到了相同的结果

【参考方案1】：

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

我设置媒体查询的方式有误。而不是

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

我把查询改成

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

按照这个人的建议：https://***.com/a/996820/556006

它在所有设备上都能完美运行。感谢那些提出建议的人，为大家点赞。

【讨论】：

我现在只是来验证 CSS 并在事后看到了您自己的答案。对于像这种验证这样的情况可能是要走的路，因为很多错误归结为缺少或多余的字符:) jigsaw.w3.org/css-validator

【参考方案2】：

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

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

要定位 iPhone 4 之类的设备，您需要 max-width 或 960px（这就是引导程序默认为 960 的原因）用于横向，480px 用于纵向。

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

【讨论】：

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

为了清晰起见，在最初的帖子中添加了一些屏幕截图。

你是对的。查询中的max-width 意味着任何更小的东西都将使用这种样式。有趣的是，在具有小窗口宽度的 Desktop Safari 上，页面看起来像您的第二个屏幕截图。

是的，我也突然注意到了这一点。当我查看 Chrome 的检查元素时，它根本没有显示媒体查询的样式。它肯定会加载正确的 css 表，所以我不知道发生了什么。你可以看这里：agoodman.com.au/css/user.css 看到底部的媒体查询有什么问题吗？