媒体查询不适用于任何 iphone答案

【问题标题】：Media query not working on any iphones媒体查询不适用于任何 iphone
【发布时间】：2014-06-19 12:32:54
【问题描述】：

我已经在 stackoverflow 上研究了这个问题，但我仍然无法解决它。如果可以的话请帮忙:)

我正在使用 wordpress 主题 Hatch，其中包含似乎不会影响任何 iphone（4 或 5）的媒体查询。

这是我正在使用的 html 中的 viewport 语句：

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

我还尝试了我能想到的所有媒体查询变体。目前，我正在使用：

@media only screen and (max-width: 480px) and (orientation:portrait) {

    .wrap { 
    max-width: 300px;
    border: 1px solid red; 
    }
}

我也试过了，没用：

@media only screen and (max-device width: 480px) and (orientation:portrait) {

    .wrap { 
    max-width: 300px;
    border: 1px solid red; 
    }
}

提前感谢任何可以提供帮助的人。

【问题讨论】：

它可能会被覆盖。你有违规网站的链接吗？我可以快速浏览一下
我可能是错的，但initial-scale=1 没有将其设置为页面的正常宽度（就像您在桌面上查看它一样），因此永远不会达到 480 像素的宽度？
嗨 Vector - 不确定我是否按照我应该的方式做出回应，但该网站是 lsussman.com/illustration。谢谢！

标签： css iphone wordpress media-queries

【解决方案1】：

尝试使用这些

肖像模式

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) <-- 568px for iphone 5, 480px for iphone 4 -->
and (orientation : portrait) { 
   /* STYLES GO HERE */ 
}

纵向和横向

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 
   /* STYLES GO HERE */
}

【讨论】：

嗨 Gaurav，谢谢你的建议，但没有骰子。这是最奇怪的事情！
我的意思是它不起作用。看起来应该！
感谢 Howdy_McGee 的建议。我试过了，还是没有骰子。我只是查看了我所有的代码，看看是否有任何悬挂括号，但一切看起来都很好。我被难住了！

【解决方案2】：

天哪，我是个叮当！问题是媒体查询上方的 CSS 代码中有不匹配的 {}。

经验教训：当没有任何事情像它应该的那样工作并且没有意义时，它几乎总是在代码的某个地方出现一些小问题。有时候也好。

感谢大家的帮助！

【讨论】：