3 个针对 iphone 纵向、横向和 ipad 纵向的媒体查询

Posted 2023-03-06

【中文标题】3 个针对 iphone 纵向、横向和 ipad 纵向的媒体查询

【英文标题】：3 media queries for iphone portrait, landscape and ipad portrait

【发布时间】：2012-12-04 07:38:28

【问题描述】：

我已经尝试了width 和device-width 的不同组合，但在 iPhone 上，此代码不会将背景变为红色；

当我有超过 1 个媒体查询时，我遇到了问题。看到这个JSfiddle example div 背景永远不会是绿色的，除非你删除最后一个媒体查询

这就是我想要的 3 个不同的媒体查询目标：

智能手机和平板电脑（仅限纵向）。这将是我所有用于响应式布局的通用样式的地方 宽度：320px - 479px - 这将适用于小屏幕，例如 iPhone 仅纵向 width: 480px - 640px - 这将适用于更大的屏幕，例如横向的 iphone 和纵向的 ipad。不是横向的ipad。

请注意，这是针对 html 电子邮件的，因此无法使用 JS。

@media only screen and (max-width: 640px) 
    body  padding: 10px !important 

/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) 
    body  background: blue !important 

/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (max-device-width: 640px) 
    body  
       background: red !important 
       -webkit-text-size-adjust:none; 
    

参考：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

【参考方案1】：

你自己的尝试修改了

@media only screen and (max-width: 640px) and (orientation: portrait) 
    body  padding: 10px !important 


/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) 
    body  background: blue !important 


/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (orientation: landscape),
@media only screen and (max-device-width: 640px) and (orientation: portrait)  
    body  
       background: red !important 
       -webkit-text-size-adjust:none; 
    

【讨论】：

请注意，逗号, 用作OR，and 用作and。因此，您始终可以组合媒体查询。

@media only screen and (max-device-width: 480px) and (orientation: Landscape) -- 不适用于 iphone 横向，无法识别

嗨，我在 ios 6，iphone 4 上，“iPhone 风景”的媒体查询对我不起作用，其余的工作

【参考方案2】：

媒体查询还支持设备方向。你应该试试

@media screen and (orientation:portrait) 
    /* Portrait styles */


@media screen and (orientation:landscape) 
    /* Landscape styles */

你也可以像这样将它们与宽度结合起来

@media screen and (max-device-width : 320px) and (orientation:portrait) 

【参考方案3】：

看看这个资源，它将为您提供几乎所有 http://arcsec.ca/media-query-builder/ 的媒体查询，您还需要指定最小宽度。也少了一些！重要的，肮脏的:)

你的情况

@media only all and (min-device-width: 320px) and (max-device-width: 480px) 
/* insert styles here */

【讨论】：

谢谢，虽然我查看了链接，但所有的选择都令人困惑。我必须使用!important，因为它用于 HTML 电子邮件，我需要覆盖内联样式。

【参考方案4】：

响应式电子邮件可能很困难，因为那里有很多电子邮件客户端，而且对媒体查询的支持可能有限。您可能只想考虑使您的 div 具有百分比流动性，因此它们可以缩放，而不是媒体查询。 zurb 的人有一些很棒的模板，它们也可能会有所帮助。 http://www.zurb.com/playground/responsive-email-templates

希望对您有所帮助。

【参考方案5】：

我通过在 diff 中使用 Om 的解决方案进行了尝试。它对我有用的方式，希望它可以帮助某人

@media only screen and (max-device-width:1024px) and (orientation: portrait)     
    /*style*/    
    
@media only screen and (max-device-width: 1024px) and (orientation: landscape)  
    /*style*/

【讨论】：

这是我的完整答案：-@media only screen and (max-device-width:1024px) and (orientation: portrait) /*style*/ @media only screen and (max -device-width: 1024px) and (orientation: Landscape) /*style*/