EKsumic's Blog

let today = new Beginning();

Click the left button to use the catalog.

OR

如何在 Blazor 應用中檢測裝置類型（如行動裝置或桌面裝置）

2025-01-19 15:40:26

EKsumic

161 Reads

Add

More
Copyright notice: This article is an original article and follows CC 4.0 BY-NC-ND Copyright agreement. If you want to repost this article, please attach the original source link and this statement.   Source link: https://www.v2know.com/MainPage/PreView/1085

發現在代網頁應用程式時，根據使用者的裝置類型（如行動裝置或桌面裝置）來調整使用者體驗是一個常見的需求。本文將教大家如何在 Blazor Server 中使用 IHttpContextAccessor 來檢測使用者的裝置類型，並根據檢測結果提供不同的呈現方式。

解決方案概述

我們將透過以下步驟實現這個功能：

  1. 注入 IHttpContextAccessor 來取得 HTTP 請求中的 User-Agent 標頭。

  2. 分析 User-Agent 字串，判斷使用者是否來自行動裝置。

  3. 根據檢測結果顯示不同的內容。

以下是完整的程式碼範例：

Program.cs:

// 組件中注入 IHttpContextAccessor 並讀取 User-Agent
builder.Services.AddHttpContextAccessor();

YourPage.razor:

@inject IHttpContextAccessor HttpContextAccessor

@code {
    private string? UserAgent { get; set; }
    private bool IsMobile { get; set; }

    protected override void OnInitialized()
    {
        UserAgent = HttpContextAccessor.HttpContext?.Request.Headers["User-Agent"].ToString();

        // 判斷是否為手機
        IsMobile = UserAgent != null &&
                   (UserAgent.Contains("Mobi") || UserAgent.Contains("Android") || UserAgent.Contains("iPhone"));
    }
}

<h3>Device Type: @(IsMobile ? "Mobile" : "PC")</h3>

這樣，當使用者開啟應用程式時，頁面會自動判斷並顯示其裝置類型。

在 Blazor WebAssembly 中的注意事項

Blazor WebAssembly 的應用程式是在使用者的瀏覽器中執行的，因此無法直接使用 IHttpContextAccessor。不過，您可以改用 JavaScript 與 .NET 互操作的方式來實現類似功能。

以下是 WebAssembly 版本的範例：

JavaScript 檔案

在 wwwroot 資料夾中新增一個 JavaScript 檔案，內容如下：

function getUserAgent() {
    return navigator.userAgent;
}

修改 Razor 元件程式碼

在 Blazor WebAssembly 中，我們使用 IJSRuntime 與 JavaScript 互操作：

@inject IJSRuntime JSRuntime

@code {
    private string? UserAgent { get; set; }
    private bool IsMobile { get; set; }

    protected override async Task OnInitializedAsync()
    {
        UserAgent = await JSRuntime.InvokeAsync<string>("getUserAgent");

        // 判斷是否為手機
        IsMobile = UserAgent != null &&
                   (UserAgent.Contains("Mobi") || UserAgent.Contains("Android") || UserAgent.Contains("iPhone"));
    }
}

<h3>裝置類型：@(IsMobile ? "行動裝置" : "桌面裝置")</h3>

 

This article was last edited at 2025-01-19 15:43:50

Today's comments have reached the limit. If you want to comment, please wait until tomorrow (UTC-Time).

There is 14h57m49s left until you can comment.

解決 TortoiseGit 更新 .gitignore 文件後無反應的問題

326 Reads

內容： 當更新 .gitignore 文件後，TortoiseGit 的文件狀態有時無法即時更新，這是由 Status Cache 設定引起的。不同的緩存模式會影響文件狀態的檢查頻率和性能。 Status Cache 模式介紹 Default（預設） 使用內部緩存，加快狀態顯示。 適用場景：性能優先，文件變動不頻繁。 Shell Extended（推薦） 由 Windows Shell 提供更頻繁的狀態更新，立即反映 .gitignore 變化。 適用場景：頻繁修改 .gitignore 或需要即時文件狀態更新... OR | From：EKsumic

如何使用 UFW 配置防火壠保護服務器

243 Reads

防火壠（Firewall）是保護服務器安全的重要工具，可以有效阻止未經授權的流量，防範掃描和攻擊。本文將重點講解如何使用 UFW （Uncomplicated Firewall）配置防火壠規則，關閉不必要的端口並允許必要的服務，從而實現全面的安全保護... OR | From：EKsumic

Blazor <NavLink> 中的 Match 屬性詳解

212 Reads

在 Blazor 應用中，導航鏈接 <NavLink> 是一個非常常用的組件，用於實現頁面的路由導航。<NavLink> 提供了一個 Match 屬性，允許開發者控制鏈接的激活邏輯。本文將詳細解釋 Match="NavLinkMatch.All" 和 Match="NavLinkMatch.Prefix" 的區別，並提供使用場景和最佳實踐... OR | From：EKsumic

如何在 Ubuntu 24.04 上設置 UFW 防火牆和 SSH（準備操作）

208 Reads

在本文中，我們將介紹如何檢查和啟用 UFW 防火牆，以及設置 SSH 服務，確保您的 Ubuntu 24.04 系統更安全地運行。這些操作屬於基本的準備步驟，適合初步配置系統使用... OR | From：EKsumic

如何在 Blazor Web App 中實現關閉註冊並啟用唯一授權賬號

206 Reads

本文介紹如何在 Blazor Web App 使用獨立賬號驗證（Identity）並關閉用戶註冊功能，同時開啟唯一授權賬號功能。以下步驟包括修改註冊頁面、為特定賬號授權，以及在數據庫中檢查授權是否生效... OR | From：EKsumic

如何將 Unity WebGL 專案部署到 IIS

195 Reads

Unity 構建時的注意事項 在 Unity WebGL 的構建過程中： 選擇壓縮格式： 推薦選擇 Gzip 或 Brotli。 啟用 Decompression Fallback： 勾選 Decompression Fallback，確保瀏覽器在無法解壓壓縮文件時可以加載未壓縮版本... OR | From：EKsumic

解釋「生命周期」的概念，以及 Singleton、Scoped 和 Transient 的含義

180 Reads

1. 什麼是生命周期？ 在 Blazor 或 ASP.NET Core 中，服務的生命周期 指的是 一個服務實例的存活時間，也就是說： 從服務創建到釋放期間，它可以被重複使用多少次，或者被誰共享？ 當我們註冊一個服務時（例如：builder.Services.AddScoped()），我們需要告訴系統： 這個服務應該存活多久... OR | From：EKsumic

.NET 8 混合 Blazor 應用：如何由 Server Host 客戶端

171 Reads

在 .NET 8 混合 Blazor Web App 模式下，你的解決方案通常包含兩個專案：一個伺服器專案（例如 v2knowBlazor）和一個客戶端專案（例如 v2knowBlazor.Client）。在這個架構中，實際運行應用程序的是伺服器專案，它同時負責 host 和提供客戶端的 Blazor WASM 應用... OR | From：EKsumic

Blazor 元件之間的傳值方式極簡總結

166 Reads

Blazor 中的數據傳遞主要通過以下方式：父組件向子組件傳遞參數：<ChildComponent Parameter="Value" />。 子組件向父組件通知事件：使用 EventCallback。 雙向數據綁定：通過 bind-。 多層嵌套數據共享： 全局數據：依賴注入 (DI)。 層級數據：Cascading Parameters... OR | From：EKsumic

一個簡單的 SignalR Hub 示例

162 Reads

下面是一個簡單的 SignalR Hub 示例，包括服務器端和客戶端的基本配置與使用說明。 1. 服務器端 a. 建立 Hub 類別 首先，在 v2knowBlazor（Server）專案中新增一個 SignalR Hub 類別，例如 ChatHub.cs... OR | From：EKsumic

如何在 Blazor 應用中檢測裝置類型（如行動裝置或桌面裝置）

161 Reads

發現在代網頁應用程式時，根據使用者的裝置類型（如行動裝置或桌面裝置）來調整使用者體驗是一個常見的需求。本文將教大家如何在 Blazor Server 中使用 IHttpContextAccessor 來檢測使用者的裝置類型，並根據檢測結果提供不同的呈現方式... OR | From：EKsumic

在 Ubuntu 24.04 上部署 .NET 8 Blazor Web App

159 Reads

你是否在安装了最新的 Ubuntu 24.04 后，準備好上手部署一个 .NET 8 Blazor Web App？通過下列步骤，你可以轻松完成這件事！ 1. 準備 Ubuntu 服務器 首先，確保你的 Ubuntu 服務器是最新版，並且安装了所有基礎工具... OR | From：EKsumic

解決 Nginx 中 "conflicting server name "_" on 0.0.0.0:80, ignored" 警告

158 Reads

這表示在你的 Nginx 配置中，有多個 server 块嘗試監聽相同的 IP 和端口（這裡是 0.0.0.0:80），並且其中至少有二個使用相同的 server_name 值為 _（即“匹配所有詢求”）。爲了避免衝突，Nginx 將選擇忽略其中一個。 以下將解釋如何解決這個問題，使你的 Nginx 配置更加清楚和穩定... OR | From：EKsumic

為何在舊 IE 中讀得到值，而在 Chrome/Firefox/Edge 中失敗？

153 Reads

以下是一個簡化的範例：在 IE（尤其是比較舊版本、且在 Quirks Mode 下）可以正常讀取，但在 Chrome、Firefox、Edge 等現代瀏覽器中，會出現 undefined 或直接報錯。此例用的是舊式 document.myForm.myInput[0].value 這種語法，IE 會把它當作「集合存取」而湊合可用；但現代標準瀏覽... OR | From：EKsumic

C# DbContext 的兩種寫法

149 Reads

在 .NET 和 Entity Framework Core 應用中，DbContext 有兩種常見的實現方式：標準構造函數與記錄型構造函數 (Primary Constructor)。以下是它們的比較與選擇建議... OR | From：EKsumic

什麼是 dotnet ef migrations script？

132 Reads

在使用 Entity Framework Core（EF Core）進行數據庫管理時，我們經常需要更新數據庫的結構，而 dotnet ef migrations script 是一個非常實用的命令，專門用來生成 SQL 腳本。這篇文章將簡要介紹它的功能及常見使用場景。 什麼時候需要用到 dotnet ef migrations script？ 當你需要把... OR | From：EKsumic

如何使用 Nginx 禁止 IP 直連，僅允許域名訪問

125 Reads

在使用 Nginx 部署網站時，可能會遇到這樣的需求：希望用戶只能通過域名訪問，而不允許直接通過 IP 地址訪問網站。本文將介紹如何通過配置 Nginx 來實現這一目標。 問題背景 當用戶通過伺服器的 IP 地址直接訪問時，可能會暴露伺服器的真實地址，甚至導致未經授權的訪問。為了解決這個問題，我們可以通過 Nginx 的「默認伺服器」功能來攔截所有 IP 直連請求，並僅允許通過特定的域名訪問網站... OR | From：EKsumic

Entity Framework Core Code First 使用 MySQL 的常用命令總結

124 Reads

​以下是使用 Entity Framework Core Code First 搭配 MySQL 時最常用的命令彙總，幫助您快速掌握如何操作遷移和數據庫。 1. 創建遷移文件 用於生成遷移（Migration）文件，描述數據庫的結構變化。 Package Manager Console： Add-Migration [遷移名稱] 範例： Add-Migration InitialCreate .NET CLI： dotnet ef migrations add [遷移名稱] 範例： dotnet ef migrations add InitialCreate 2. 應用遷移到數據庫 將遷移應用到... OR | From：EKsumic

如何使用 Nginx 實施逐步過渡，從 www 過渡到根域名

119 Reads

在網站運營中，你可能會遇到這樣的需求：現有網站主要收錄於 www.example.com，但希望逐步將域名過渡到根域名 example.com。這種過渡需要謹慎進行，避免影響 SEO 和用戶體驗。本文將介紹如何通過 Nginx 配置來實現逐步過渡，並解釋這樣做的好處。 為什麼選擇逐步過渡方案？ 逐步過渡的方案 是一種穩妥的方式，可以在保留現有流量和 SEO 收錄的基礎上，逐漸將網站的權重轉移到根域名... OR | From：EKsumic

如何實現舊 URL 到描述性新 URL 的 301 重定向

118 Reads

在網站運營中，舊的 URL 結構（如 /MainPage/PreView/99）可能不夠簡潔和描述性，不利於用戶體驗和 SEO。而我們希望將其優化為新結構（如 /article/how-to-save-the-world），並通過 301 重定向 平滑過渡，將舊 URL 的 SEO 權重轉移到新 URL。本文將介紹如何通過 Nginx 和 Blazor 結合實現這一目標。 需求分析 舊 URL 的挑戰： 結構冗長，缺乏語義，不利於 SEO。 用戶無法通過 URL 判斷頁面內容... OR | From：EKsumic