追記 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 を作ったほうがよいです(クエリが先で、ハッシュが後)
- 実際にはクエリやハッシュに対応するため location.href のクエリ部分を置換するか
// リダイレクトする 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 を返してくれれば、このスクリプトは不要です