如何根据设备尺寸使用屏幕

Question

我有3个登录屏幕：

• 一个用于大型和超大型设备（例如：笔记本电脑，台式机等）。
• 第二个用于中型设备（例如：平板电脑，iPad）。
• 第三个用于小型和超小型设备（例如：手机）。

基于设备，我应该显示登录屏幕如果我在笔记本电脑上打开Web应用程序，则应该显示登录屏幕1，在Ipad上，我应该显示登录屏幕2，在移动设备上，我应该显示登录屏幕3。 / p>

我该怎么做？

Answer 1

您可以为此使用移动查询

打字稿：

1. 声明：

   mobileQuery: MediaQueryList;

   private _mobileQueryListener: () => void;

2. 在构造函数注入中添加：

   media: MediaMatcher,

   changeDetectorRef: ChangeDetectorRef

3. 在构造函数代码中添加：

   this.mobileQuery = media.matchMedia('(max-width: 700px)');

   this._mobileQueryListener = () => changeDetectorRef.detectChanges();

   this.mobileQuery.addListener(this._mobileQueryListener);

HTML：

<div *ngIf="mobileQuery.matches"> code for mobile view </div>

<div *ngIf="!mobileQuery.matches"> code for desktop view </div>