Note: always try to detect the specific behavior you're trying to fix, instead of targeting it with isSafari?
As a last resort, detect Safari with this regex:
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
It uses negative look-arounds and it excludes Chrome, Edge, and all Android browsers that include the Safari
name in their user agent.
You can easily use index of Chrome to filter out Chrome:
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
alert("1") // Chrome
} else {
alert("2") // Safari
}
}
As other people have already noted, feature detection is preferred over checking for a specific browser. One reason is that the user agent string can be altered. Another reason is that the string may change and break your code in newer versions.
If you still want to do it and test for any Safari version, I'd suggest using this
var isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 &&
navigator.userAgent &&
navigator.userAgent.indexOf('CriOS') == -1 &&
navigator.userAgent.indexOf('FxiOS') == -1;
This will work with any version of Safari across all devices: Mac, iPhone, iPod, iPad.
To test in your current browser: https://jsfiddle.net/j5hgcbm2/
Updated according to Chrome docs to detect Chrome on iOS correctly
It's worth noting that all Browsers on iOS are just wrappers for Safari and use the same engine. See bfred.it's comment on his own answer in this thread.
Updated according to Firefox docs to detect Firefox on iOS correctly
Just use:
var isSafari = window.safari !== undefined;
if (isSafari) console.log("Safari, yeah!");
This code is used to detect only safari browser
if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0)
{
alert("Browser is Safari");
}
Because userAgent for chrome and safari are nearly the same it can be easier to look at the vendor of the browser
Safari
navigator.vendor == "Apple Computer, Inc."
Chrome
navigator.vendor == "Google Inc."
FireFox (why is it empty?)
navigator.vendor == ""
IE (why is it undefined?)
navigator.vendor == undefined
Read many answers and posts and determined the most accurate solution. Tested in Safari, Chrome, Firefox & Opera (desktop and iOS versions). First we need to detect Apple
vendor and then exclude Chrome, Firefox & Opera (for iOS).
let isSafari = navigator.vendor.match(/apple/i) &&
!navigator.userAgent.match(/crios/i) &&
!navigator.userAgent.match(/fxios/i) &&
!navigator.userAgent.match(/Opera|OPT\//);
if (isSafari) {
// Safari browser is used
} else {
// Other browser is used
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With