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

Question

在可视化如何构造我的基于浏览器的 Web 应用程序以根据屏幕尺寸和方向具有不同的行为时遇到一些困难。我的应用程序是为我的状态建立在 Angular 和 ui-router 上，并为我的风格建立 Bootstrap 。当前功能在手机和桌面上是相同的。基本上是:

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

但是，如果用户使用的是平板电脑，我需要以下功能(基于方向):

肖像

• 同上

风景

• 项目列表一直向左浮动
• 详细 View 在右侧可见(即您曾经在平板电脑上使用过的任何电子邮件应用程序)
• 单击列表项会在右侧显示详细信息 View 。

我想我正在为如何使用 Angular 进行设置而苦苦挣扎。现在，单击一个项目会彻底改变状态(重新呈现 View )。单击项目时我是否只需要做这样的事情(sudo 代码):

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

然后在我的 ListView 中使用媒体查询根据屏幕尺寸和方向隐藏/显示详细信息部分？

开放并感谢有关如何设置它的任何建议。谢谢!

Answer 1

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

var screenWidth   = window.innerWidth;

对于 iPad 1，您可以这样理解:

portait    =  768
landscape  =  1024

对于 iPhone4，你可以这样理解:

portait    =  640
landscape  =  960

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

注意:此实现只能在第一次加载时遵循，但一旦完成第一次加载并更改方向，它就不会发挥任何作用。

另一种方法是使用:
@media(最小宽度:641px){}我没有太多想法，需要查找。