如何根據設備大小使用屏幕 (How to use the screens based on the device size)

問題描述

如何根據設備大小使用屏幕 (How to use the screens based on the device size)

我有 3 個登錄屏幕：

• 一個用於大型和超大型設備（例如：筆記本電腦、台式機等）。
• 第二個用於中型設備（例如：平板電腦、Ipad）。
• 第三種適用於小型和超小型設備（例如：手機）。

基於設備 I應該顯示登錄屏幕 如果我在筆記本電腦上打開我的 Web 應用程序，我應該顯示登錄屏幕 1，在 Ipad 上我應該顯示登錄屏幕 2，在移動設備上我應該顯示登錄屏幕 3。

如何我這樣做？

參考解法

方法 1:

You can use mobile query for this

Typescript :

1. Declare:

   mobileQuery: MediaQueryList;

   private _mobileQueryListener: () => void;

2. In the constructor injection add :

   media: MediaMatcher,

   changeDetectorRef: ChangeDetectorRef

3. In constructor code add :

   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>

(by kumkum kumkum、Shubham)

參考文件

1. How to use the screens based on the device size (CC BY‑SA 2.5/3.0/4.0)