[JS]スマフォ・タブレットなどのデバイスを判定し、CSS/JavaScriptで簡単に利用できるようにするスクリプト -Device.js

Post on:2013年9月5日

ページにほんの一行外部ファイルを加えるだけで、iPhone, iPadなどのiOSをはじめ、Android, Blackberry, Windows Phone, Window Tabletなどスマフォやタブレット、デスクトップなどのデバイスを判定し、簡単に条件付きのCSSやJavaScriptを利用できるにするスクリプトを紹介します。

サイトのキャプチャ

Device.js -GitHub

Device.jsの使い方

Device.jsの実装は、簡単です。
外部ファイルとして、当スクリプトを記述するだけです。

<script src="device.js"></script>

スクリプトを設置すると、表示デバイスに基づいて<html>に適切なclassを付与します。

iPhoneでアクセスすると、こんな感じに。

<html class="ios iphone mobile landscape">
  <head>...</head>
  <body>...</body>
</html>

Androidタブレットでアクセスすると、こんな感じに。

<html class="android tablet portrait">
  <head>...</head>
  <body>...</body>
</html>

あとは、それぞれのデバイス用のスタイルシートを記述しておくだけです。

.ios p{
  /* iOS用のパラグラフのスタイル */
}

.android p{
  /* Android用のパラグラフのスタイル */
}

サポートしているデバイス

サポートしているデバイスは、下記の通りです。

  • iOS: iPhone, iPod, iPad
  • Android: Phones & Tablets
  • Blackberry: Phones & Tablets
  • Windows: Phones & Tablets

CSSのclass一覧

各デバイスとCSSのclass名は、下記のようになります。

iPad
ios ipad tablet
iPhone
ios iphone mobile
iPod
ios ipod mobile
Android Phone
android mobile
Android Tablet
android tablet
BlackBerry Phone
blackberry mobile
BlackBerry Tablet
blackberry tablet
Windows Phone
windows mobile
Windows Tablet
windows tablet
Desktop
desktop

各デバイスの向きも判定します。

Landscape
landscape
Portrait
portrait

JavaScriptのメソッド一覧

JavaScriptのメソッドも用意されています。

Mobile
device.mobile()
Tablet
device.tablet()
iOS
device.ios()
iPad
device.ipad()
iPhone
device.iphone()
iPod
device.ipod()
Android
device.android()
Android Phone
device.androidPhone()
Android Tablet
device.androidTablet()
BlackBerry
device.blackberry()
BlackBerry Phone
device.blackberryPhone()
BlackBerry Tablet
device.blackberryTablet()
Windows
device.windows()
Windows Phone
device.windowsPhone()
Windows Tablet
device.windowsTablet()

Device.jsのデモ

デモページでは、どのデバイスでアクセスしたかハイライトされるようになっています。

デモのキャプチャ

デモページ：デスクトップで表示

デモのキャプチャ

デモページ：タブレットで表示

sponsors

top of page

©2024 coliss