77

我有一个应用程序，我想根据用户导航的位置将用户重定向到不同的页面。

如果从网络剪辑导航，请勿重定向。如果从移动 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";
}
4

13 回答 13

174

请参阅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);
于 2015-04-17T10:20:00.260 回答
35

更新：这是一个非常古老的答案，我无法删除它，因为答案已被接受。检查下面不知情的答案以获得更好的解决方案。

您应该能够检查用户代理字符串中的“iPad”或“iPhone”子字符串：

var userAgent = window.navigator.userAgent;

if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
   // iPad or iPhone
}
else {
   // Anything else
}
于 2010-06-09T15:55:36.610 回答
28

最佳做法是：

function isMobileSafari() {
    return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
}
于 2011-02-08T13:23:43.840 回答
9

合并所有答案和评论。这就是结果。

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));
于 2016-03-05T12:13:24.313 回答
8

Falling code 只找到移动 safari 没有别的（除了 dolphin 和其他小浏览器）

  (/(iPad|iPhone|iPod)/gi).test(userAgent) &&
  !(/CriOS/).test(userAgent) &&
  !(/FxiOS/).test(userAgent) &&
  !(/OPiOS/).test(userAgent) &&
  !(/mercury/).test(userAgent)
于 2015-12-17T15:01:08.253 回答
5

看到所有的答案，这里有一些关于建议的正则表达式的提示：

  • AppleWebKit也匹配桌面 Safari（不仅是移动设备）
  • 无需.match多次调用此类简单的正则表达式，并且更喜欢更轻的.test方法。
  • （全局）正则g表达式标志无用，而i（不区分大小写）可能有用
  • 不需要捕获（括号），我们只是测试字符串

我只是使用它，因为获取true移动 Chrome 对我来说是可以的（相同的行为）：

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

（我只想检测设备是否是 iOS 应用程序的目标）

于 2016-09-29T14:35:04.173 回答
3

这个正则表达式对我有用，干净简单：

const isIOSSafari = !!window.navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
于 2019-09-30T04:05:59.887 回答
1

实际上，没有检测移动 safari 的灵丹妙药。有不少浏览器可能会使用mobile safari的user agent的关键字。也许您可以尝试特征检测并不断更新规则。

于 2014-03-11T08:45:10.960 回答
1

我赞成@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);
};

主要区别在于，重命名webkitto webkitUa，以防止与webkit用作 SPA 和 UIView 之间的消息处理程序的根对象发生冲突。

于 2017-02-10T15:01:30.473 回答
1

我知道这是一个旧线程，但我想与你们分享我的解决方案。

我需要检测用户何时从桌面 Safari 导航（因为我们处于 2017 年中期，而 Apple 尚未对input[type="date"]YET 提供任何支持......

所以，我为它做了一个后备自定义日期选择器）。但仅适用于桌面版 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();
  })
}
于 2017-09-23T17:14:12.067 回答
0

我一直在寻找这个答案，我记得我以前遇到过这个。

用 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。其他所有浏览器和设备此属性都可以正常工作。

不确定他们是否打算改变这一点，但目前它运作良好。

于 2018-03-20T21:47:17.867 回答
-1 
function isIOS {
  var ua = window.navigator.userAgent;
  return /(iPad|iPhone|iPod).*WebKit/.test(ua) && !/(CriOS|OPiOS)/.test(ua);
}
于 2016-02-06T16:15:40.293 回答
-1 
var isApple = false;    
if(/iPhone|iPad|iPod/i.test(navigator.userAgent)) {      
  isApple = true;
}
于 2021-01-13T21:43:22.567 回答