{"id":19976643,"url":"https://github.com/erossini/blazorbrowserdetect","last_synced_at":"2025-05-04T03:30:31.072Z","repository":{"id":150092946,"uuid":"457712690","full_name":"erossini/BlazorBrowserDetect","owner":"erossini","description":"Browser detect component for  Blazor WebAssembly and Blazor Server with .NET6","archived":false,"fork":false,"pushed_at":"2023-11-13T13:22:11.000Z","size":293,"stargazers_count":41,"open_issues_count":5,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T02:43:04.928Z","etag":null,"topics":["blazor","blazor-component","blazor-components","blazor-server","blazor-webassembly","net6"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erossini.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-10T09:28:58.000Z","updated_at":"2025-04-06T09:59:27.000Z","dependencies_parsed_at":"2024-11-13T03:24:57.879Z","dependency_job_id":"b1d5abf7-0bfc-4504-852e-0f4049d0adfb","html_url":"https://github.com/erossini/BlazorBrowserDetect","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorBrowserDetect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorBrowserDetect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorBrowserDetect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorBrowserDetect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erossini","download_url":"https://codeload.github.com/erossini/BlazorBrowserDetect/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252283518,"owners_count":21723485,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-component","blazor-components","blazor-server","blazor-webassembly","net6"],"created_at":"2024-11-13T03:24:50.443Z","updated_at":"2025-05-04T03:30:30.065Z","avatar_url":"https://github.com/erossini.png","language":"JavaScript","readme":"# Browser Detect for Blazor\nThis is a browser detect component for [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/) with .NET6. \n\n\u003e If you need help, info or some device is not detected correctly, leave your message in the [Forum](https://www.puresourcecode.com/forum/browser-detect-for-blazor/). \n\nRead the full post on [PureSourceCode.com](https://www.puresourcecode.com):\n- [Version 1.0.11](https://www.puresourcecode.com/dotnet/blazor/browser-detect-component-for-blazor-2/)\n- [First version](https://www.puresourcecode.com/dotnet/blazor/browser-detect-component-for-blazor)\n\nNow, you can try your component by yourself from the website. [Try it now!](https://browserdetect.puresourcecode.com/)\n\n![browsers](https://user-images.githubusercontent.com/9497415/153390277-3c9ef12c-5e4e-488e-bc3b-c02d84da5195.jpg)\n\n## Installation\nFist, you have to add the component from [NuGet](https://www.nuget.org/packages/PSC.Blazor.Components.BrowserDetect/). Then, open your `_Imports.razor` and add the following:\n\n```\n@using PSC.Blazor.Components.BrowserDetect\n```\n\n## Detected capabilities or properties\n\n| Property | Value |\n| --- | --- |\n| BrowserName | Name of the browser |\n| BrowserMajor | Major version of the browser |\n| BrowserVersion | Version of the browser |\n| CPUArchitect | If it is possible, the component detect the CPU architecture of the machine |\n| DeviceModel | Device model (if it is possible) |\n| DeviceType | Device type (if it is possible) |\n| DeviceVendor | Device Vendor (if it is possible) |\n| EngineName | Browser engine name |\n| EngineVersion | Browser engine version |\n| GPURenderer | Type of the GPU renderer |\n| GPUVendor | Vendor of the GPU |\n| IsDesktop | Detect if the device is a desktop computer |\n| IsMobile | Detect if the device is a mobile |\n| IsTablet | Detect if the device is a tablet |\n| IsAndroid | Detect if the device is an Android device |\n| IsIPhone | Detect if the device is an iPhone or iPod |\n| IsIPad | Detect if the device is an iPad (any version) |\n| IsIPadPro | Detect if the device is an iPad Pro |\n| OSName | Detect the operating system |\n| OSVersion | Version of the operating system |\n| ScreenResolution | Detect the screen resolution |\n| TimeZone | Read the time zone |\n| UserAgent | The full user agent |\n\n### Detecting the operating system and the architecture\n\nTo detect the browser and all the other details from the user, it is not always accurate. For example, if the client has `Windows 11` there is no way to\nreturn the correct version of the operating system. If you have a `MacOS`, again JavaScript can't detect from the `navigator` string any info.\nThe JavaScript can detect the `OSName`, `Windows` or `MacOS` but not the exact version.\n\nTo detect in a correct way the correct version of the operating system and the architecture of the CPU, the component has to run few tests that take time.\n\nFor this reason I added 2 events in the component:\n\n- OSArchitectureUpdate\n- OSVersionUpdate\n\nSo, if you want to receive the notification when of the correct version of the operating system and the CPU architecture, the component is like this code:\n\n```\n\u003cBrowserDetect @bind-BrowserInfo=\"@Info\" \n               OSArchitectureUpdate=\"WindowsArchitectureString\"\n               OSVersionUpdate=\"WindowsUpdateString\" /\u003e\n```\n\nthen the functions look like\n\n```csharp\npublic BrowserInfo? Info { get; set; }\npublic string? OSInfo { get; set; } = \"\";\npublic string? OSCPUInfoString { get; set; }\n\nprivate void OSArchitectureString(string cpu)\n{\n    OSCPUInfoString = cpu;\n}\n\nprivate void OSUpdateString(string version)\n{\n    OSInfo = version;\n}\n```\n\nBoth events return a simple string with the values. For example:\n\n- if the operating system is `Windows 11`, the `OSUpdateString` receives the string `11`; \n- if the operating system is `Windows 10 1809`, the `OSUpdateString` receives the string `10 (1809)`\n- if the CPU is 32 bit, the `OSArchitectureString`, receives the string `x86`\n\n#### Mac Architecture\n\n- ARM\n- ARM 64\n\n#### Windows Architecture Values\n\n- x86_64\n- x86\n- ARM64\n- ARM32\n\n#### Windows Version\n\n| Version    | platformVersion                   |\n|------------|-----------------------------------|\n| Win7/8/8.1 | 7/8/8.1                           |\n| Win10 1507 | 10 (1507)                         |\n| Win10 1511 | 10 (1511)                         |\n| Win10 1607 | 10 (1607)                         |\n| Win10 1703 | 10 (1703)                         |\n| Win10 1709 | 10 (1709)                         |\n| Win10 1803 | 10 (1803)                         |\n| Win10 1809 | 10 (1809)                         |\n| Win10 1903 | 10 (1903 or 10 1909)              |\n| Win10 1909 | 10 (1903 or 10 1909)              |\n| Win10 2004 | 10 (2004 or 20H2 or 21H1 or 21H2) |\n| Win10 20H2 | 10 (2004 or 20H2 or 21H1 or 21H2) |\n| Win10 21H1 | 10 (2004 or 20H2 or 21H1 or 21H2) |\n| Win10 21H2 | 10 (2004 or 20H2 or 21H1 or 21H2) |\n| Win11      | 11                                |\n\n## Screenshot\n\n### Windows 11\n![image](https://user-images.githubusercontent.com/9497415/224862912-9b85159a-5ae4-416c-a5ff-08ff13723960.png)\n\n### Windows 10\n![image](https://user-images.githubusercontent.com/9497415/153378372-4c0d0449-7e70-49ce-9c09-3fd5de2538a7.png)\n\n## iPhone\n![image](https://user-images.githubusercontent.com/9497415/153378671-8469e052-a17f-45b2-9d8c-1d9822aa7a19.png)\n\n## Android mobile\n![Screenshot_20220210-093352 4335](https://user-images.githubusercontent.com/9497415/153379124-1934e7c9-f9ba-4ed0-8c8c-72831914c377.jpg)\n\n## Amazon Fire tablet\n![Screenshot_20220210-093737 4338](https://user-images.githubusercontent.com/9497415/153380151-07f11db7-0ef3-450f-9a9d-a9b34eee0c11.png)\n\n## iPad\n![image](https://user-images.githubusercontent.com/9497415/153380116-819ea3bc-1a6f-4d86-9213-24f092fc7372.png)\n\n## iMac\n\u003cimg width=\"1893\" alt=\"Screenshot 2022-02-10 at 09 42 16\" src=\"https://user-images.githubusercontent.com/9497415/153380566-bea2447f-e025-40c2-9693-32c4962f9b70.png\"\u003e\n\n\n---\n    \n## PureSourceCode.com\n\n[PureSourceCode.com](https://www.puresourcecode.com/) is my personal blog where I publish posts about technologies and in particular source code and projects in [.NET](https://www.puresourcecode.com/category/dotnet/). \n\nIn the last few months, I created a lot of components for [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/).\n\nMy name is Enrico Rossini and you can contact me via:\n- [Personal Twitter](https://twitter.com/erossiniuk)\n- [LinkedIn](https://www.linkedin.com/in/rossiniuk)\n- [Facebook](https://www.facebook.com/puresourcecode)\n\n## Blazor Components\n\n| Component name | Forum | NuGet | Website | Description |\n|---|---|---|---|---|\n| [AnchorLink]() | [Forum](https://puresourcecode.com/forum/anchorlink/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.AnchorLink) | | An anchor link is a web link that allows users to leapfrog to a specific point on a website page. It saves them the need to scroll and skim read and makes navigation easier. This component is for [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/) |\n| [Autocomplete for Blazor](https://www.puresourcecode.com/dotnet/net-core/autocomplete-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/autocomplete-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Autocomplete) | | Simple and flexible autocomplete type-ahead functionality for [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/) |\n| [Browser Detect for Blazor](https://www.puresourcecode.com/dotnet/blazor/browser-detect-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/browser-detect-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.BrowserDetect) | [Demo](https://browserdetect.puresourcecode.com) | Browser detect for Blazor WebAssembly and Blazor Server |\n| [ChartJs for Blazor](https://www.puresourcecode.com/dotnet/blazor/blazor-component-for-chartjs/) | [Forum](https://www.puresourcecode.com/forum/chart-js-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Chartjs) | [Demo](https://chartjs.puresourcecode.com/) | Add beautiful graphs based on ChartJs in your Blazor application |\n| [Clippy for Blazor](https://www.puresourcecode.com/dotnet/blazor/blazor-component-for-chartjs/) | [Forum](https://www.puresourcecode.com/forum/clippy/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Clippy) | [Demo](https://clippy.puresourcecode.com/) | Do you miss Clippy? Here the implementation for Blazor |\n| [CodeSnipper for Blazor](https://www.puresourcecode.com/dotnet/blazor/code-snippet-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/codesnippet-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.CodeSnippet) | | Add code snippet in your Blazor pages for 196 programming languages with 243 styles |\n| [Copy To Clipboard](https://www.puresourcecode.com/dotnet/blazor/copy-to-clipboard-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/copytoclipboard/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.CopyToClipboard) | | Add a button to copy text in the clipboard | \n| [DataTable for Blazor](https://www.puresourcecode.com/dotnet/net-core/datatable-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/datatables/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.DataTable) | [Demo](https://datatable.puresourcecode.com/) | DataTable component for Blazor WebAssembly and Blazor Server |\n| [Google Tag Manager]() | [Forum]() | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.GoogleTagManager) | [Demo](https://datatable.puresourcecode.com/) | Adds Google Tag Manager to the application and manages communication with GTM JavaScript (data layer). |\n| [Icons and flags for Blazor](https://www.puresourcecode.com/forum/icons-and-flags-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/icons-and-flags-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Icons) | | Library with a lot of SVG icons and SVG flags to use in your Razor pages |\n| [ImageSelect for Blazor]() | [Forum](https://puresourcecode.com/forum/imageselect/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.ImageSelect) | | This is a Blazor component to display a dropdown list with images based on ms-Dropdown by Marghoob Suleman. This component is built with NET7 for [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/) |\n| [Markdown editor for Blazor](https://www.puresourcecode.com/dotnet/blazor/markdown-editor-with-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/markdown-editor-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.MarkdownEditor) | [Demo](https://markdown.puresourcecode.com/) | This is a Markdown Editor for use in Blazor. It contains a live preview as well as an embeded help guide for users. |\n| [Modal dialog for Blazor](https://www.puresourcecode.com/dotnet/blazor/modal-dialog-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/modal-dialog-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.ModalDialog) | | Simple Modal Dialog for Blazor WebAssembly |\n| [Modal windows for Blazor](https://www.puresourcecode.com/dotnet/blazor/modal-dialog-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/modal-dialog-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Modals) | | Modal Windows for Blazor WebAssembly |\n| [Quill for Blazor](https://www.puresourcecode.com/dotnet/blazor/create-a-blazor-component-for-quill/) | [Forum](https://www.puresourcecode.com/forum/forum/quill-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Quill) | | Quill Component is a custom reusable control that allows us to easily consume Quill and place multiple instances of it on a single page in our Blazor application |\n| [ScrollTabs](https://www.puresourcecode.com/dotnet/blazor/scrolltabs-component-for-blazor/) | | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.ScrollTabs) | | Tabs with nice scroll (no scrollbar) and responsive |\n| [Segment for Blazor](https://www.puresourcecode.com/dotnet/blazor/segment-control-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/segments-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Segments) | | This is a Segment component for Blazor Web Assembly and Blazor Server |\n| [Tabs for Blazor](https://www.puresourcecode.com/dotnet/blazor/tabs-control-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/tabs-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Tabs) | | This is a Tabs component for Blazor Web Assembly and Blazor Server |\n| [Timeline for Blazor](https://www.puresourcecode.com/dotnet/blazor/timeline-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/timeline/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Timeline) | | This is a new responsive timeline  for Blazor Web Assembly and Blazor Server |\n| [Toast for Blazor](https://www.puresourcecode.com/forum/psc-components-and-source-code/) | [Forum](https://www.puresourcecode.com/forum/psc-components-and-source-code/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Toast) | | Toast notification for Blazor applications |\n| [Tours for Blazor](https://www.puresourcecode.com/forum/psc-components-and-source-code/) | [Forum](https://www.puresourcecode.com/forum/psc-components-and-source-code/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.Tours) | | Guide your users in your Blazor applications |\n| [TreeView for Blazor]() | [Forum](https://puresourcecode.com/forum/treeview/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.TreeView) | | This component is a native Blazor TreeView component for [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/). The component is built with .NET7. |\n| [WorldMap for Blazor](https://puresourcecode.com/dotnet/blazor/world-map-component-for-blazor) | [Forum](https://www.puresourcecode.com/forum/worldmap-for-blazor/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Blazor.Components.WorldMap) | [Demo](https://worldmap.puresourcecode.com/) | Show world maps with your data |\n\n## C# libraries for .NET6\n\n| Component name | Forum | NuGet | Description |\n|---|---|---|---|\n| [PSC.Evaluator](https://www.puresourcecode.com/forum/psc-components-and-source-code/) | [Forum](https://www.puresourcecode.com/forum/forum/psc-extensions/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Evaluator) | PSC.Evaluator is a mathematical expressions evaluator library written in C#. Allows to evaluate mathematical, boolean, string and datetime expressions. |\n| [PSC.Extensions](https://www.puresourcecode.com/dotnet/net-core/a-lot-of-functions-for-net5/) | [Forum](https://www.puresourcecode.com/forum/forum/psc-extensions/) | ![NuGet badge](https://img.shields.io/nuget/v/PSC.Extensions) | A lot of functions for .NET5 in a NuGet package that you can download for free. We collected in this package functions for everyday work to help you with claim, strings, enums, date and time, expressions... |\n\n## More examples and documentation\n\n### Blazor\n*   [Write a reusable Blazor component](https://www.puresourcecode.com/dotnet/blazor/write-a-reusable-blazor-component/)\n*   [Getting Started With C# And Blazor](https://www.puresourcecode.com/dotnet/net-core/getting-started-with-c-and-blazor/)\n*   [Setting Up A Blazor WebAssembly Application](https://www.puresourcecode.com/dotnet/blazor/setting-up-a-blazor-webassembly-application/)\n*   [Working With Blazor Component Model](https://www.puresourcecode.com/dotnet/blazor/working-with-blazors-component-model/)\n*   [Secure Blazor WebAssembly With IdentityServer4](https://www.puresourcecode.com/dotnet/blazor/secure-blazor-webassembly-with-identityserver4/)\n*   [Blazor Using HttpClient With Authentication](https://www.puresourcecode.com/dotnet/blazor/blazor-using-httpclient-with-authentication/)\n*   [InputSelect component for enumerations in Blazor](https://www.puresourcecode.com/dotnet/blazor/inputselect-component-for-enumerations-in-blazor/)\n*   [Use LocalStorage with Blazor WebAssembly](https://www.puresourcecode.com/dotnet/blazor/use-localstorage-with-blazor-webassembly/)\n*   [Modal Dialog component for Blazor](https://www.puresourcecode.com/dotnet/blazor/modal-dialog-component-for-blazor/)\n*   [Create Tooltip component for Blazor](https://www.puresourcecode.com/dotnet/blazor/create-tooltip-component-for-blazor/)\n*   [Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/class-libraries?view=aspnetcore-5.0\u0026tabs=visual-studio)\n*   [ChartJs component for Blazor](https://www.puresourcecode.com/dotnet/blazor/blazor-component-for-chartjs/)\n*   [Labels and OnClickChart for ChartJs](https://www.puresourcecode.com/dotnet/blazor/labels-and-onclickchart-for-chartjs/)\n\n### Blazor \u0026 NET8\n* [Custom User Management with NET8 and Blazor (1st part)](https://puresourcecode.com/dotnet/blazor/custom-user-management-with-net8-and-blazor/)\n* [NET8, Blazor and Custom User Management (2nd part)](https://puresourcecode.com/dotnet/blazor/net8-blazor-and-custom-user-management/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferossini%2Fblazorbrowserdetect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferossini%2Fblazorbrowserdetect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferossini%2Fblazorbrowserdetect/lists"}