如何使用 javascript 將 iPad Pro 檢測為 iPad？

Question

我們能夠像這樣使用 javascript 檢測到 iPad 設備：

function isDeviceiPad(){
    return navigator.platform.match(/iPad/i);
}

這在檢測 iPad 設備時非常有效，但是當我們檢查iPad Pro (10.5 inch)時，它沒有檢測到它是 iPad。

為了進一步調查，我們深入到navigator器 object，檢查了platform和userAgent ，並得到了這些結果：

navigator.platform = 'MacIntel';
navigator.userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) 
 AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15)';

問題是返回navigator.platform = 'MacIntel' （與 MacBook Pro 相同）而不是iPad 。 我們需要一種方法來檢測這是 iPad 而不是 MacBook Pro，但導航器似乎不會像舊 iPad 那樣返回iPad 。

知道我們如何解決這個問題嗎？

Answer 1

iPadPro 將 navigator.platform 報告為“MacIntel”，但這與其他平台相同。

目前（2019 年）iPadPro 與其他平台的區別在於 iPadPro 支持觸控。

這里有一些有用的方法。

function isIOS() {
  if (/iPad|iPhone|iPod/.test(navigator.platform)) {
    return true;
  } else {
    return navigator.maxTouchPoints &&
      navigator.maxTouchPoints > 2 &&
      /MacIntel/.test(navigator.platform);
  }
}

function isIpadOS() {
  return navigator.maxTouchPoints &&
    navigator.maxTouchPoints > 2 &&
    /MacIntel/.test(navigator.platform);
}

Answer 2

我猜 iPad Pro 升級到 iPadOS 13 Beta。 由於 Apple 聲稱在 iPadOS 上使用 Safari進行桌面級瀏覽，因此移動 Safari 似乎也模仿了 macOS 行為和用戶代理。

所以，簡短的回答是不可能。

但是，您可以嘗試解決此問題的答案。

Answer 3

您可以為此使用正則表達式。

var isIPadPro = /Macintosh/.test(navigator.userAgent) && 'ontouchend' in document;

Answer 4

您可以使用屏幕尺寸來檢查它，iPad pro 有 2 個不同的側面。 詳細實現波紋管，將其修改為您的用例

function isIpadPro() {
    var ratio = window.devicePixelRatio || 1;
    var screen = {
        width : window.screen.width * ratio,
        height : window.screen.height * ratio
    };
    return (screen.width === 2048 && screen.height === 2732) || (screen.width === 2732 && screen.height === 2048) || (screen.width === 1536 && screen.height === 2048) || (screen.width === 2048 && screen.height === 1536);
}

屏幕尺寸參考： http : //screensiz.es/

Answer 5

目前，在 2020 年 10 月，我知道的唯一方法是：

(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 0) || navigator.platform === 'iPad'

Answer 6

檢測“ iPad Pro 10.5 ”設備的最簡單方法是檢查其屏幕尺寸，即"window.screen.height x window.screen.width = 1112 x 834"

但是，我想知道為什么您需要檢測設備型號。 如果您想檢測移動瀏覽器，請查看這個問題：檢測移動瀏覽器

Answer 7

您應該能夠使用屏幕大小來區分它們。 認為您需要為要檢測的每個 iPad pro 找到真正的價值。

window.screen.height
window.screen.width

Answer 8

Capacitor 有一個有用的網絡插件來獲取設備信息（ https://capacitor.ionicframework.com/docs/apis/device#example ）。 它不區分 iPad Pro 和普通 iPad，但是您可以將此插件的使用與建議的屏幕尺寸解決方案結合使用。

如果你想自己做這件事，你可以看看這里的代碼： https : //github.com/ionic-team/capacitor/blob/master/core/src/web/device.ts

Answer 9

有可能的。

您可以使用此 function。這還將檢查帶有觸摸設備 (iPad 13) 的 mac。

<script type="text/javascript">

    if(iOS()){
        alert('iOS');
    }

    function iOS() {
            return [
                    'iPad Simulator',
                    'iPhone Simulator',
                    'iPod Simulator',
                    'iPad',
                    'iPhone',
                    'iPod'
                ].includes(navigator.platform)
                // iPad on iOS 13 detection
                ||
                (navigator.userAgent.includes("Mac") && "ontouchend" in document)
        }
</script>