媒体查询：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

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

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

Answer 3

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