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

angular js - code flow based on device orientation

本文关键字：方向 代码 js- angular      更新时间：2023-09-26

在可视化如何构建基于浏览器的web应用程序以根据屏幕大小和方向具有不同的行为时遇到了一些困难。我的应用程序建立在angular和ui路由器上，用于我的状态，并用于我的风格。当前的功能在手机和桌子上都是一样的。基本上是：

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

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

纵向

  • 同上

横向

  • 项目列表一直向左浮动
  • 详细信息视图可在右侧查看（IE您在平板电脑上使用过的任何电子邮件应用程序）
  • 单击列表项将填充右侧的详细信息视图

我想我很难用angular来设置它。现在，单击某个项目会完全更改状态（从而重新渲染视图）。当我点击一个项目（sudo代码）时，我只需要做这样的事情吗：

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

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

开放并感谢任何关于如何设置的建议。谢谢

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

var screenWidth   = window.innerWidth;

对于iPad1，你可以得到：

portait    =  768
landscape  =  1024

对于iPhone4，你可以得到：

portait    =  640
landscape  =  960

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

注意：这个实现只能在第一次加载时执行，但一旦第一次加载完成并更改了方向，它就不会起任何作用。

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

相关文章：