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

Question

我正在尝试使用meta tag 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) { ... }