如何在一個應用程序中實現自適應網頁設計

Question

有沒有辦法在一個組件中使用2個模板？我的意思是，例如我正在構建的網站不是響應式網頁設計。因此，有兩種不同的觀點，即桌面和移動視圖。我想爲兩者使用相同的應用程序。如何在基於用戶設備的組件中切換兩個模板（一個用於桌面視圖，另一個用於移動視圖）？那可能嗎？

Answer 1

首先，您必須在初始化時檢測屏幕大小，並設置特殊標誌以瞭解當前應用程序正在運行的設備。

initializeRWD() { 
    if (screen.width < 1080) { 
     this.isSmallScreen = true; 
    } else { 
     this.isSmallScreen = false; 
    } 
} 

接下來，我會把你的模板<div class="desktop">和<div class="mobile">並根據屏幕尺寸顯示它們中的，例如：

<div class="desktop"> *ngIf="!isSmallScreen"> 
    <!-- desktop code here --> 
</div> 

<div class="mobile" *ngIf="isSmallScreen"> 
<!-- mobile code here --> 
</div>`