媒体查询:定位方向:横向,不排除台式计算机

Posted

技术标签:

【中文标题】媒体查询:定位方向:横向,不排除台式计算机【英文标题】:Media Queries: Targeting orientation: landscape without excluding desktop computers 【发布时间】:2013-02-17 17:25:12 【问题描述】:

我目前正在构建一个响应式页面,但我遇到了问题。 对于更大的屏幕尺寸,我想放大标题等内容。这可行,但在我的 iPhone 上以横向模式测试页面时,标题太大了。

为什么竖屏 iPhone 会触发更大屏幕的媒体查询?好吧,扩大标题的 CSS 规则包含在这个媒体查询中:

@media only screen and (min-width: 30em) 
    /* 480 pixel */

iPhone 横向屏幕的宽度为 480 像素。所以我试着这样做:

@media only screen and (min-width: 30em) not (orientation: landscape) 
        /* 480 pixel* /

现在它可以在我的 iPhone 上使用,但我的 MacBook 上的标题不再放大。可能只是某种逻辑错误,但我哪里错了?

【问题讨论】:

only screen and (min-width: 30em) not (orientation: landscape) 根据规范不是有效的媒体查询。奇怪的是它可以在 iPhone 上运行,不过...... 【参考方案1】:

尝试将not (orientation:landscape) 替换为and (orientation:portrait)。如果失败,请尝试将 em 值更改为 px 值。一些浏览器还不能很好地使用em,所以值得一试。

编辑:为什么不把它分成不同的样式?

@media all and (min-width:480px) and (orientation:landscape) 
    // styles for desktops, mouse-friendly interface


@media all and (min-width:480px) and (orientation:portrait) 
    // styles for mobiles, touch-friendly interface

【讨论】:

没有帮助,抱歉。横向媒体查询仍然在我的 MacBook 上触发。我相信这是因为屏幕是“宽屏”,这意味着它的宽度大于高度。 是的,这就是触发它的原因。我会在一分钟内用另一种可能的解决方案更新答案。 @media all and (max-device-width:480px) and (orientation:landscape) /*stuff*/ 成功了。我会接受你的回答,因为你把我引向了它! 非常感谢。编码愉快!

以上是关于媒体查询:定位方向:横向,不排除台式计算机的主要内容,如果未能解决你的问题,请参考以下文章

Css 媒体查询方向:android web 视图中的横向无法正常工作

区分手持设备和台式机上的纵向模式

媒体查询

CSS媒体查询及其使用

聊聊最近接触的媒体查询!

CSS3媒体查询总结