東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

【JS】Split ViewやSlide Overも考慮したiPadの判定【ユーザーエージェント】

2022.04.20 Posted by

こんにちは、ウェブラボクリエイターズメモです。

ウェブサイトを制作するにあたり、大きく分けて

  • PC
  • タブレット
  • スマホ

の3パターンの動作を考慮すると思います。

特に、ホバーで展開するナビなど作成する際、タブレットではタップで展開するように改変する必要がありますが

iPadはiPadでも、Split ViewSlide Overなどのマルチタスク機能を使用している際はレスポンシブでスマホ用のレイアウトになるので、正しく動作するかチェックが必要です。

Split View

Split Viewとは、iPadの画面を2分割してAppを表示できる機能です。

Slide Over

1つのAppをフローティングウィンドウに表示し、左右どちらかに表示できる機能です。

Slide Over

これらの状態を判定するためにJSで取得できる「ドキュメント幅」÷「モニター幅」が

0.5くらいならSplit View

0.3くらいならSlide Overなのでは?

と仮説を立て、実験してみたところ

  • デバイスの回転も考慮しなければならない
  • Split Viewは左右のサイズを調整できる
  • 「ドキュメント幅」は最小でも320px

などと判定が煩雑そうな上、UserAgentは廃止されるとも言われているので、一旦諦めることに。

結論

長々と書いてしまいましたが、結局は

  • ブレイクポイント以上だけど、タッチデバイスのときはタブレット
  • それ以外でブレイクポイント以上のときはPC
  • ブレイクポイント以下のときはスマホまたはSplit Viewとか

と判定して、タブレット専用の記述を書くのが良いかなと思いました。

ブレイクポイントとは、PCとスマホのレイアウトの切り替えポイントのことです。

768の値を適宜変更してください。

検証に使用したデモはこちら

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278