[英]Determine if user navigated from mobile Safari
我有一个应用程序,我想根据用户导航的位置将用户重定向到不同的页面。
如果从网络剪辑导航,请勿重定向。 如果从移动 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";
}
请参阅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);
最佳做法是:
function isMobileSafari() {
return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
}
合并所有答案和评论。 这就是结果。
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));
Falling code 只找到移动 safari 没有别的(除了 dolphin 和其他小浏览器)
(/(iPad|iPhone|iPod)/gi).test(userAgent) &&
!(/CriOS/).test(userAgent) &&
!(/FxiOS/).test(userAgent) &&
!(/OPiOS/).test(userAgent) &&
!(/mercury/).test(userAgent)
看到所有的答案,这里有一些关于建议的正则表达式的提示:
AppleWebKit
也与桌面 Safari 匹配(不仅是移动设备).match
,而更喜欢更轻的.test
方法。g
(全局)正则表达式标志无用,而i
(不区分大小写)可能有用我只是使用它,因为移动 Chrome 对我来说是true
的(相同的行为):
/iPhone|iPad|iPod/i.test(navigator.userAgent)
(我只想检测设备是否是 iOS 应用程序的目标)
这个正则表达式对我有用,干净简单:
const isIOSSafari = !!window.navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
实际上,没有检测移动 safari 的灵丹妙药。 有不少浏览器可能会使用mobile safari的user agent的关键字。 也许您可以尝试特征检测并不断更新规则。
我赞成@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
对象发生冲突。
我知道这是一个旧线程,但我想与你们分享我的解决方案。
我需要检测用户何时从桌面 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();
})
}
我一直在寻找这个答案,我记得我以前遇到过这个。
用 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。 其他所有浏览器和设备此属性都可以正常工作。
不确定他们是否打算改变这一点,但目前它运作良好。
如果有人需要,这里基于不知情的答案是正则表达式。
/^(?=.*(iPhone|iPad|iPod))(?=.*AppleWebKit)(?!.*(criOS|fxiOS|opiOS|chrome|android)).*/i
已经很多年了,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 中进行调整。
function isIOS {
var ua = window.navigator.userAgent;
return /(iPad|iPhone|iPod).*WebKit/.test(ua) && !/(CriOS|OPiOS)/.test(ua);
}
var isApple = false;
if(/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
isApple = true;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.