[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js

スマホ・タブレット・デスクトップのブラウザがさまざまな機能(WebGL, Canvas, rem unit, async属性、タッチイベントなど)に対応しているか判別し、その判定を利用することができる超軽量(1kb)スクリプトを紹介します。

ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。

サイトのキャプチャ

Feature.js
Feature.js -GitHub

Feature.jsの特徴

Feature.jsは、ユーザーが利用するスマホ・タブレット・デスクトップのブラウザの機能を判別し、利用することができます。

サイトのキャプチャ

WebGL, Canvasをはじめ、単位にremが使えるか、async属性は利用できるか、といった実用的なものが多数揃っています。また、いくつか補足事項があります。

touch
タッチイベントがサポートされるかの判定で、タッチスクリーンデバイスの判定ではありません。
css3Dtransform
Android上のWebkit系ブラウザで非常に稀ですが、間違った判定するかもしれません。これは必要があれば改善します。
deviceMotionとdeviceOrientation
多くのデスクトップブラウザがイベントリスナーをサポートしており、デバイスが必要とするセンサーを持っていなくてもポジティブな結果を返します。
placeholder
iOS 3のSafariで間違った判定を行いますが、このOSのユーザーは基本的にいないためこの問題は考慮しません。

Feature.jsの使い方

Step 1: 外部ファイル

当スクリプトをhead内か</body>の上に、外部ファイルとして記述します。

これで準備は終了です。スクリプトの初期化は必要ありません。

Step 2: ブラウザの機能を判定

いくつかの書式があります。まずは、基本の書式から。

Modernizrのように、HTMLの要素にclassとして利用することもできます。

jQueryを使っているなら、記述はもっとシンプルになります。

複数の機能を判定する場合は、結合させるだけです。
「&&」「||」などの演算子が利用できます。

実際の動作は、下記のテストページでご確認ください。

サイトのキャプチャ

Feature.jsのテストページ

当環境のデスクトップ(Win7, OS X)、タブレット(iOS)、スマホ(iOS)で見てみたところ、期待通りの結果が表示されていました。

top of page

©2016 coliss