媒体查询不适用于任何 iphone

Posted 2023-03-06

【中文标题】媒体查询不适用于任何 iphone

【英文标题】：Media query not working on any iphones

【发布时间】：2014-06-19 12:32:54

【问题描述】：

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

我正在使用 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。谢谢！

【参考方案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 代码中有不匹配的 。

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

感谢大家的帮助！