53
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ユーザエージェントでの iPad 判定関数 iOS/iPadOS 対応版

Last updated at Posted at 2019-07-23

追記 2019-09-03

@BYODKM さんから、簡潔に iPad か否かを判定するプロパティを教えていただきました。ありがとうございました。(実機 iOS12, iPadOS の iPad にて確認済みです)

下記のコードで iOS12 と iPadOS どちらでも iPad か否かを判定できます。

const ua = window.navigator.userAgent.toLowerCase();
const isiPad = ua.indexOf('ipad') > -1 || ua.indexOf('macintosh') > -1 && 'ontouchend' in document;

iPhone も含めた iOS 端末か否かを判定する場合は下記になります。

const ua = window.navigator.userAgent.toLowerCase();
const isiOS = ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1 || ua.indexOf('macintosh') > -1 && 'ontouchend' in document;

macOS か否かの場合は下記です。追記 2019-09-24

const ua = window.navigator.userAgent.toLowerCase();
const isMac = ua.indexOf('macintosh') > -1 && !('ontouchend' in document);

概要

  • iPadOS は 2019 年秋にリリース予定の iPad 用 OS
  • iPadOS Public Beta 版では macOS Safari と同一のユーザエージェントを返すためサーバサイドでは判定が困難
  • iPad の解像度が固定であることから、解像度で iPad か否かを判定します
  • (アプリケーションのウィンドウではなく)画面の解像度を取得しているため、スプリットビュー表示(画面分割表示)でも問題ないはず(未検証)

PHP や Rails などのサーバサイドで判定するためには

  • このスクリプトで Cookie にデバイスの種類を入れていただければ OK です
  • Cookie の他 URL の末尾に ?device=ipad&os=ipados を付与して、リダイレクトでもよいと思います。
    • 実際にはクエリやハッシュに対応するため location.href のクエリ部分を置換するか location.pathname + location.search + '&device=ipad&os=ipados' + location.hash のように、改めて URL を作ったほうがよいです(クエリが先で、ハッシュが後)
// リダイレクトする URL を組み立てる例
const url = location.protocol + '//' + location.host + location.pathname + location.search + '&device=ipad&os=ipados' + location.hash;

iOS/iPadOS 対応版 iPad 判定関数

記事が冗長なため、当初のコードを削除しました。前述のコードを推奨します。

その他

  • IE 対応が必要な場合は let/const の記述を var に置換してください
  • iPadOS 正式リリース後 iPadOS 版 Safari が iPad の文字列を含む、適切な UA を返してくれれば、このスクリプトは不要です
53
45
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
53
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?