为啥这个 CSS 媒体查询没有对在 iPhone 上显示的网站进行更改？ [复制]

Posted 2023-03-06

【中文标题】为啥这个 CSS 媒体查询没有对在 iPhone 上显示的网站进行更改？ [复制]

【英文标题】：Why is this CSS media query not making changes to the site as it displays on an iPhone? [duplicate]为什么这个 CSS 媒体查询没有对在 iPhone 上显示的网站进行更改？ [复制]

【发布时间】：2014-04-08 06:01:27

【问题描述】：

在http://ccachicago.pragmatometer.com，我在样式表中有以下媒体查询，旨在垂直堆叠菜单项并增大字体大小：

@media (handheld, only screen and (max-width: 1023px))
    
    div, p
        
        font-size: 36px !important;
        
    #navigation > li
        
        display: block;
        
    

我想在响应式设计方面做更多的事情，但现在我还没有一个有效的冒烟测试。我已经重新加载了几次页面，它似乎以内联、水平方式显示菜单项，并且对于 P 中的文本而言，文本不会显示为放大。

如何更改

【问题讨论】：

您想要为 1024 像素宽 (iPad) 或小于 1024 像素宽的分辨率堆叠导航菜单？现在您的代码设置为后者，而不是前者。只是想确保你知道这一点。可能是因为它是body的子元素，宽度为80%，所以表单太宽（先填满80%），需要堆叠。

【参考方案1】：

你需要在页面的头部包含

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这是必需的，以便手机不只是缩放网站以适应窗口。

然后将您的媒体查询更改为以下内容：

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

div, p
    
    font-size: 36px !important;
    
#navigation height:auto;
#navigation > li
    
    float:none;
    width:100%;
    

您可能需要做更多的覆盖，具体取决于您希望最终输出是什么

我什至建议使用媒体查询

@media only screen and (max-width: 1023px)

这样你就可以在浏览器中测试了

【参考方案2】：

随着 Apple 和 android 宣称自己是屏幕，手持媒体类型已变得多余，我相信手持媒体类型适用于具有非常基本的网络浏览器的旧设备。

我相信这里可以回答： media queries in responsive design

但您还需要在头部添加一个元视口标签，以防止移动设备调整网站大小。

<meta name="viewport" content="width=device-width,initial-scale=1.0">