我在需要大視口的 web 應用中使用 Material UI 5.6。我想為整個應用程式定義一個最小螢屏寬度，這樣：
- 如果用戶在寬度較小的設備上訪問應用程式，應用程式的大小不應超過定義的最小寬度。
- 如果用戶在寬度較小的設備上訪問應用程式，請向他們顯示我們不完全支持他們的設備的警告訊息。
這是否可以通過 MUI 實作，或者我需要另一個庫來實作這一點？
uj5u.com熱心網友回復：
第一個要求可以通過樣式和媒體查詢來實作，并且可以使用純 CSS或特定于 MUI 的樣式工具來實作。
第二個需求可以通過useMediaQuery 鉤子以多種方式實作：
限制設備不受支持的用戶使用該應用程式
您可以將整個應用程式包裝在一個包裝器組件中，您可以在其中定義所需的最小寬度
const requiredWidth = useMediaQuery("(min-width:1024px)");
然后您可以回傳您的應用程式的 UI 或螢屏，并顯示該設備不受支持的訊息：
return requiredWidth ? (
{ children }
) : (
<p>We do not fully support your device </p>
);
在這種情況下，用戶將無法使用整個應用程式。
顯示警報
另一種選擇是使用相同的包裝器組件并呈現一個Alert或Snackbar，它們將與應用程式的其余 UI 一起呈現：
return (
<>
{children}
{requiredWidth && <AlertComponent />}
</>
);
在這種情況下，用戶將收到有關其設備的通知，但仍可以使用該應用程式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466124.html