ipad - 媒体查询：iPad只有一个方向有效

Question

我目前正在转换为自适应网站的网站遇到麻烦。出于某种原因，我只能获得在 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的链接

Answer 1

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

Answer 2

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

Answer 3

试一试：

@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 */
}