Though both are Webkit based browsers, Safari urlencodes quotation marks in the URL while Chrome does not.
Therefore I need to distinguish between these two in JS.
Generic FUNCTION
var getBrowseActive = function (browserName) {
return navigator.userAgent.indexOf(browserName) > -1;
};
If you are checking the browser use $.browser
. But if you are checking feature support (recommended) then use $.support
.
You should NOT use $.browser to enable/disable features on the page. Reason being its not dependable and generally just not recommended.
If you need feature support then I recommend modernizr.
unfortunately the above examples will also detect android's default browser as Safari, which it is not.
I used
navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Android') == -1
I use to detect Apple browser engine, this simple JavaScript condition:
navigator.vendor.startsWith('Apple')
Using a mix of feature detection
and Useragent
string:
var is_opera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var is_Edge = navigator.userAgent.indexOf("Edge") > -1;
var is_chrome = !!window.chrome && !is_opera && !is_Edge;
var is_explorer= typeof document !== 'undefined' && !!document.documentMode && !is_Edge;
var is_firefox = typeof window.InstallTrigger !== 'undefined';
var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
Usage:
if (is_safari) alert('Safari');
Or for Safari only, use this :
if ( /^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {alert('Its Safari');}
// Safari uses pre-calculated pixels, so use this feature to detect Safari
var canva = document.createElement('canvas');
var ctx = canva.getContext("2d");
var img = ctx.getImageData(0, 0, 1, 1);
var pix = img.data; // byte array, rgba
var isSafari = (pix[3] != 0); // alpha in Safari is not zero