Question

我发帖这可能是因为我不知道那些不常见的事情的正确术语。

只是想知道最佳做法以及一些示例的链接。

您有一个主列表 - 响应式网站中的详细信息。在移动视图中，页面在单独的页面中显示主列表及其相关详细信息。但是在桌面视图中，主组件位于左侧，右侧选择了详细信息页面。因此，您在主列表上选择一个示例，并且详细信息部分反映所选的所选主记录。您还可以使用按钮为所选主记录更改所选详细信息的显示。

这一切都很好，直到有人发送一个详细信息链接，取自移动视图，有人在桌面视图中打开它，如果他们只使用桌面视图，则为他们提供之前可能没有遇到过的页面。理想情况下，我们希望在桌面视图中具有主 - 详细视图，同时显示所选的详细视图。避免这种情况的最佳做法是什么？

我们是否根据浏览器的大小重新路由？什么是最佳做法？这个例子的简单链接也是最受欢迎的。

此致

标记

Answer 1

网站倾向于使用media queries使其对所有不同的屏幕尺寸做出响应。

根据应用程序在桌面和移动设备上的视图复杂程度，您可以使用类似ng2-responsive的内容，这样可以使用断点显示不同的组件，屏幕大小为xs / sm / md / lg / xl。 / p>

Angular也有@angular/flex-layout，目前正在开发中使用media queries个断点。 Demo here

通过这种方式，您可以为应用内的所有网页提供相同的链接，以便在桌面设备或移动设备上使用它们。

更新了以下评论1：

示例所有移动网页网址都以/ mobile /

开头

因为浏览器需要加载视图以实际获取屏幕尺寸，所以ng2-responsive的工作方式就是你添加例如

移动设备的简单检测

<template *isMobile (change)="onScreenSizeMobile($event)">

</template>

桌面的简单检测

<template *isDesktop (change)="onScreenSizeDesktop($event)">

</template>

移动设备的高级检测

 <template  [responsive]="{
                           orientation:'landscape',
                           device: 'mobile'
                           }"
            (changes)="onScreenSizeMobile($event)">
 </template>

桌面高级检测

 <template  [responsive]="{
                           orientation:'landscape',
                           device: 'desktop'
                           }"
            (changes)="onScreenSizeDesktop($event)">
 </template>

<强>打字稿

constructor(private _router: Router ) {
  this.router = _router;
}

onScreenSizeMobile(event) {
  let currentRoute = this._router.url;
  if (!currentRoute.includes('mobile')) {
    this._router.navigate(['/mobile'+currentRoute]);
  }
}

onScreenSizeDesktop(event) {
  let currentRoute = this._router.url;
  if (currentRoute.includes('mobile')) {
    this._router.navigate([currentRoute.substring(7)]);
  }
}

如果您确实需要在服务器上检测到的桌面和移动视图的不同网址（如果设备是移动设备或不是移动设备），还有更好的选择，并且从服务器重定向会更加简单。

您是否有理由不能拥有所有相同的页面，但是在该页面中您根据设备加载了不同的组件？

如果移动加载homeMobileComponent

<app-home-mobile *isMobile>
</app-home-mobile>

如果桌面加载homeDesktopComponent

<app-home-desktop *isDesktop>
</app-home-desktop>

仅针对Angular2和MD的移动设备上桌面/详细信息的主要细节的最佳实践

1 个答案: