FLUTTER ECOSYSTEM

Workiva/platform_detect

一個用於檢測瀏覽器和平台類型及版本的程式庫。

platform_detect 專案封面
Stars
20
Forks
29
最近推送(UTC)
2026年7月31日
專案狀態
未封存
Workiva GitHub avatar
GITHUB Organization

Workiva ↗

語言DartHTMLShell

此儲存庫發佈的套件

使用的依賴

依賴清單 7 項

原始 README

以下為英文專案原文快照,最新內容請造訪 GitHub。

展開 / 收合專案 README

codecov documentation

platform_detect

A library for detecting browser and platform type and version.

Usage

A simple usage example:

import 'package:platform_detect/platform_detect.dart';

main() {
  if (browser.isChrome) {
	print('thank you for being a friend');
  }

  if (operatingSystem.isMac) {
	print('');
  }
}

Decorating the <html> element with CSS classes

This library can also be used to place CSS classes on the <html> element based on the operating system, browser, or a specific supported feature.

Add the decorator.dart import as shown in the example below, and call decorateRootNodeWithPlatformClasses within main in your application.

import 'package:platform_detect/platform_detect.dart';
import 'package:platform_detect/decorator.dart';

main() {
  decorateRootNodeWithPlatformClasses();
}

The <html> node of your application will now look like something like this:

<html lang="en" class="ua-chrome ua-chrome45 ua-lt-chrome46 ua-lt-chrome47 os-mac no-touch no-mstouch">
  <!-- ... -->
</html>
Feature detection

By default, the only browser feature that the library detects for you is touch / mstouch.

You can extend this functionality to bake in a Modernizr-esque implementation by creating your own Feature instances, and passing a list of them as the features argument to decorateRootNodeWithPlatformClasses:

import 'package:platform_detect/platform_detect.dart';
import 'package:platform_detect/decorator.dart';

// For instance, if you need to detect whether a browser supports H5 canvas stuff...
var canvasFeature = new Feature('canvas', new CanvasElement().context2D != null);

main() {
  // Decorate HTML element
  decorateRootNodeWithPlatformClasses(features: [canvasFeature]);

  // Or use the `isSupported` field somewhere else in your app...
  if (canvasFeature.isSupported) {
    // Do something
  } else {
    // Fall back / warn / etc...
  }
}

The <html> node of your application will now look like something like this for browsers that support canvas:

<html lang="en" class="canvas ...">
  <!-- ... -->
</html>

and something like this for browsers that don't support canvas:

<html lang="en" class="no-canvas ...">
  <!-- ... -->
</html>