Question

我尝试使用元标记width = device-width在ipad上获取方向。但在该视口中，两个视图的宽度均为768px，top.orientation为90.因此，我无法使用传统方法检测方向。有没有其他方法可以了解它？

Answer 1

您可以向CSS添加媒体查询以定位iPad方向：

@media all and (device-width: 768px) and (device-height: 1024px)  
           and (orientation:portrait) {
  /* css for ipad portrait */
}
@media all and (device-width: 768px) and (device-height: 1024px)  
           and (orientation:landscape) {
  /*  css for ipad landscape */
}

对于针对不同设备的更多媒体查询，您可以查看，例如Detect different device platforms using CSS

如评论中所述，应使用Javascript而不是CSS来检测方向。对此的各种建议可以在这里找到：Detect iPad orientation change（也可以用于/调用页面加载），例如方法只是检查innerHeight是否大于innerWidth：

function isPortrait() {
   return window.innerHeight > window.innerWidth;
}

Martynas在answer中提到了

。

Answer 2

我看不出你如何从宽度上获得方向。但您可以使用css指定方向规则

@media (min-width: 700px) and (orientation: landscape) { ... }

使用meta标签检测ipad方向为width = device-width

2 个答案: