angular js - 基于设备方向的代码流

Question

在查看如何构建基于浏览器的Web应用程序以基于屏幕大小和方向具有不同行为时遇到一些麻烦。我的应用程序基于角度和ui路由器为我的状态，以及我的样式的bootstrap。手机和桌子上的当前功能相同。它基本上是：

• 显示项目列表
• 点击列表项
• 转到详细状态

但是，如果用户正在使用平板电脑，我想要以下功能（基于方向）：

肖像

• 与上述相同

风景

• 项目清单一直漂浮
• 详细视图可以在右侧看到（IE浏览器在平板电脑上使用过的任何电子邮件应用）
• 单击列表项会在右侧填充详细信息视图。

我想我正在努力解决如何用角度来设置它。现在，单击项目可以更改状态（重新呈现视图）。单击一个项目（sudo代码）时，我只需要做这样的事情：

if (orientation === "portait" && tablet) {
    $state.go("detailview");
} else if (orientation === "landscape" && tablet) {
    $scope.details = getTheDeets();
}

然后在列表视图中使用媒体查询根据屏幕大小和方向隐藏/显示详细信息部分？

公开并感谢有关如何设置此内容的任何建议。谢谢！

Answer 1

这确实是一个很好的问题，不知道它的确切解决方案，但一种方法是使用屏幕宽度：

var screenWidth   = window.innerWidth;

对于iPad 1，您可以将其视为：

portait    =  768
landscape  =  1024

对于iPhone4，你得到它：

portait    =  640
landscape  =  960

同样，您可以检查目标设备的屏幕宽度。

注意： 只有在第一次加载时才能执行此实现，但是一旦完成首次加载并且您更改了方向，它就不会发挥任何作用。

另一种方法是使用：
 @media (min-width:641px) {} 我没有太多的想法，需要抬头。