媒体查询：iPad只有一个方向有效答案

【问题标题】：Media query: iPad only one orientation works媒体查询：iPad只有一个方向有效
【发布时间】：2012-08-25 16:28:26
【问题描述】：

我目前在将一个网站转换为自适应网站时遇到了麻烦。出于某种原因，我只能获得在 iPad 上工作的方向之一。如果我注释掉横向样式，则纵向样式适用于 ipad，反之亦然。我真的不明白我做错了什么......

这些是我正在使用的媒体查询：

@media all and (device-width : 768px) and (orientation: landscape) {}
@media all and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait){}

这里是网站的链接www.imarken.dk

【问题讨论】：

标签： ipad css responsive-design media-queries

【解决方案1】：

问题出在min-device-width。尝试使用 481 而不是 768。

【讨论】：

【解决方案2】：

试一试：

@media only screen and (device-width: 768px) {
  /* targets iPad  */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* targets iPad Portrait */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
 /* targets iPad Landscape */
}

【讨论】：

【解决方案3】：

我今天也遇到了同样的问题！事实证明，在元视口标签中删除我的 height=device-height 解决了这个问题，并允许 CSS 按预期在纵向和横向之间切换。希望这会有所帮助！

【讨论】：