https://www.izumi.jp/themes/custom/izumi/js/common/version.js

1import { detect } from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
2/**
3 * @class Version
4 * @description デバイス情報を判定する処理 (Detect device and browser information)
5 *
6 * @example
7 * import { Version } from 'path/to/components/Version';
8 * const version = new Version();
9 * console.log(version.isSP); // true if smartphone
10 */
11 export class Version {
12  constructor() {
13    const browserInfo = detect();
14    // User-Agent を取得
15    this.ua = window.navigator.userAgent;
16    // ブラウザ名を取得 ('chrome', 'firefox', 'safari', 'edge', 'ie', 'ios', ...)
17    this.browserName = browserInfo.name;
18    // OS 名を取得 ('Windows 10', 'Android OS', 'iOS', ...)
19    this.detectOS = browserInfo.os;
20    // body 要素への参照
21    this.bodyElm = document.querySelector('body');
22    // SP（スマホ） 判定フラグ
23    this.isSP = false;
24
25    // 初期処理
26    this.eventHandler();
27  }
28
29  /**
30   * 初期処理: SP 判定とクラス付与
31   */
32  eventHandler() {
33    this.onJudgeSP();
34    this.handleAddClass();
35  }
36
37  /**
38   * スマートフォンかどうか判別して isSP にセット
39   */
40  onJudgeSP() {
41    switch (this.detectOS) {
42      case 'Android OS':
43      case 'iOS':
44      case 'Windows Mobile':
45      case 'BlackBerry OS':
46        this.isSP = true;
47        break;
48      default:
49        this.isSP = false;
50    }
51  }
52
53  /**
54   * body 要素にブラウザ名や isSP クラスを付与
55   */
56  handleAddClass() {
57    if (!this.bodyElm) return;
58
59    // モダンブラウザ固有のクラス付与
60    switch (this.browserName) {
61      case 'ie':
62      case 'edge':
63      case 'firefox':
64        this.bodyElm.classList.add(this.browserName);
65        break;
66      case 'safari':
67      case 'ios':
68        this.bodyElm.classList.add('safari');
69        break;
70      default:
71        // その他のブラウザは何もしない
72        break;
73    }
74
75    // SP 判定クラス
76    if (this.isSP) {
77      this.bodyElm.classList.add('isSP');
78    }
79  }
80}