確定用戶是否從移動 Safari 導航

Question

我有一個應用程序，我想根據用戶導航的位置將用戶重定向到不同的頁面。

如果從網絡剪輯導航，請勿重定向。 如果從移動 Safari 導航，請重定向到 safari.aspx。 如果從其他任何地方導航，請重定向到不可用的.aspx

我能夠使用iPhone WebApps，有沒有辦法檢測它是如何加載的？ 主屏幕與 Safari？ 確定用戶是否從網絡剪輯導航，但我無法確定用戶是否從 iPhone 或 iPod 上的移動 Safari 導航。

這是我所擁有的：

if (window.navigator.standalone) {
    // user navigated from web clip, don't redirect
}
else if (/*logic for mobile Safari*/) {
    //user navigated from mobile Safari, redirect to safari page
    window.location = "safari.aspx";
}
else {
    //user navigated from some other browser, redirect to unavailable page
    window.location = "unavailable.aspx";
}

Answer 1

請參閱https://developer.chrome.com/multidevice/user-agent#chrome_for_ios_user_agent - iOS 上的 Safari 和 iOS 上的 Chrome 的用戶代理字符串非常相似：

鉻合金

Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en) AppleWebKit/534.46.0 (KHTML, like Gecko) CriOS/19.0.1084.60 Mobile/9B206 Safari/7534.48.3

蘋果瀏覽器

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

看起來這里最好的方法是首先檢查 iOS，因為其他答案已經建議，然后過濾使 Safari UA 獨一無二的東西，我建議最好用“是 AppleWebKit 而不是 CriOS”來完成：

var ua = window.navigator.userAgent;
var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
var webkit = !!ua.match(/WebKit/i);
var iOSSafari = iOS && webkit && !ua.match(/CriOS/i);

Answer 2

更新：這是一個非常古老的答案，我無法刪除它，因為答案已被接受。 檢查下面不知情的答案以獲得更好的解決方案。

---

您應該能夠檢查用戶代理字符串中的“iPad”或“iPhone”子字符串：

var userAgent = window.navigator.userAgent;

if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
   // iPad or iPhone
}
else {
   // Anything else
}

Answer 3

最佳做法是：

function isMobileSafari() {
    return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
}

Answer 4

合並所有答案和評論。 這就是結果。

function iOSSafari(userAgent) {
    return /iP(ad|od|hone)/i.test(userAgent) &&
      /WebKit/i.test(userAgent) &&
      !(/(CriOS|FxiOS|OPiOS|mercury)/i.test(userAgent));
}


// Usage:
// if iOSSafari(window.navigator.userAgent) { /* iOS Safari code here */ }

// Testing:
var iPhoneSafari = [
  "Mozilla/5.0 (iPhone; CPU iPhone OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1",
  "Mozilla/5.0 (Apple-iPhone7C2/1202.466; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A5370a Safari/604.1",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1",
  "Mozilla/5.0 (iPhone9,3; U; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1",
  "Mozilla/5.0 (iPhone9,4; U; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1",
];
console.log("All true:", iPhoneSafari.map(iOSSafari));

var iPhoneNotSafari = [
  "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/69.0.3497.105 Mobile/15E148 Safari/605.1",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/13.2b11866 Mobile/16A366 Safari/605.1.15",
];
console.log("All false:", iPhoneNotSafari.map(iOSSafari));

Answer 5

Falling code 只找到移動 safari 沒有別的（除了 dolphin 和其他小瀏覽器）

  (/(iPad|iPhone|iPod)/gi).test(userAgent) &&
  !(/CriOS/).test(userAgent) &&
  !(/FxiOS/).test(userAgent) &&
  !(/OPiOS/).test(userAgent) &&
  !(/mercury/).test(userAgent)

Answer 6

看到所有的答案，這里有一些關於建議的正則表達式的提示：

• AppleWebKit也與桌面 Safari 匹配（不僅是移動設備）
• 對於這樣簡單的正則表達式，無需多次調用.match ，而更喜歡更輕的.test方法。
• g （全局）正則表達式標志無用，而i （不區分大小寫）可能有用
• 不需要捕獲（括號），我們只是測試字符串

我只是使用它，因為移動 Chrome 對我來說是true的（相同的行為）：

/iPhone|iPad|iPod/i.test(navigator.userAgent)

（我只想檢測設備是否是 iOS 應用程序的目標）

Answer 7

這個正則表達式對我有用，干凈簡單：

const isIOSSafari = !!window.navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);

Answer 8

實際上，沒有檢測移動 safari 的靈丹妙葯。 有不少瀏覽器可能會使用mobile safari的user agent的關鍵字。 也許您可以嘗試特征檢測並不斷更新規則。

Answer 9

我贊成@unwitting 的答案，因為它不可避免地讓我前進。 但是，當在 iOS Webview 中渲染我的 SPA 時，我需要對其進行一些調整。

function is_iOS () {
    /*
        Returns (true/false) whether device agent is iOS Safari
    */
    var ua = navigator.userAgent;
    var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
    var webkitUa = !!ua.match(/WebKit/i);

    return typeof webkitUa !== 'undefined' && iOS && webkitUa && !ua.match(/CriOS/i);
};

主要區別在於，將webkit重命名為webkitUa ，以防止與用作 SPA 和 UIView 之間的消息處理程序的根webkit對象發生沖突。

Answer 10

我知道這是一個舊線程，但我想與你們分享我的解決方案。

我需要檢測用戶何時從桌面 Safari 導航（因為我們正處於 2017 年中期，而 Apple 尚未對input[type="date"]提供任何支持......

所以，我為它做了一個后備自定義日期選擇器）。 但僅適用於桌面版 Safari，因為該輸入類型在移動版 Safari 中運行良好。 所以，我做了這個正則表達式只檢測桌面 Safari。 我已經對其進行了測試，但它與 Opera、Chrome、Firefox 或 Safari Mobile 不匹配。

希望它可以幫助你們中的一些人。

if(userAgent.match(/^(?!.*chrome).(?!.*mobile).(?!.*firefox).(?!.*iPad).(?!.*iPhone).*safari.*$/i)){
  $('input[type="date"]').each(function(){
    $(this).BitmallDatePicker();
  })
}

Answer 11

我一直在尋找這個答案，我記得我以前遇到過這個。

用 JavaScript 在 iOS 上檢測 Safari 最可靠的方法是

if (window.outerWidth === 0) {
    // Code for Safari on iOS
} 

or 

if (window.outerHeight === 0) {
    // Code for Safari on iOS
} 

由於某種原因，iOS 上的 Safari 為 window.outerHeight 屬性和 window.outerWidth 屬性返回 0。

這適用於所有 iOS 版本上的所有 iPad 和 iPhone。 其他所有瀏覽器和設備此屬性都可以正常工作。

不確定他們是否打算改變這一點，但目前它運作良好。

Answer 12

如果有人需要，這里基於不知情的答案是正則表達式。

/^(?=.*(iPhone|iPad|iPod))(?=.*AppleWebKit)(?!.*(criOS|fxiOS|opiOS|chrome|android)).*/i

Answer 13

已經很多年了，Apple 仍然沒有修復他們在移動 Safari 上的底部固定定位 ( 100vh ) 錯誤。 即使其他所有瀏覽器都可以正常工作。

因此，如果 userAgent 是 Webkit Safari，除非它顯示“Apple Computer Inc.”，否則對於 Chrome 甚至 Brave 以及其他 Webkit 瀏覽器，還有一個供應商屬性會顯示“Google, Inc”。 在這種情況下，它是 Safari。

為避免桌面 Safari 中的誤報，您還需要 maxTouchPoints 屬性，移動設備為 5，桌面設備為 0。 可怕，我知道。

const isSafari =
  navigator.userAgent.match(/safari/i) &&
  navigator.vendor.match(/apple/i) &&
  navigator.maxTouchPoints;

if (isSafari) 
  $("body").classList.add("mobile-safari");

然后使用該mobile-safari類在 CSS 中進行調整。

Answer 14

function isIOS {
  var ua = window.navigator.userAgent;
  return /(iPad|iPhone|iPod).*WebKit/.test(ua) && !/(CriOS|OPiOS)/.test(ua);
}

Answer 15

var isApple = false;    
if(/iPhone|iPad|iPod/i.test(navigator.userAgent)) {      
  isApple = true;
}