Help us understand the problem. What is going on with this article?

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

追記 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 を返してくれれば、このスクリプトは不要です
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした