21Aug

Javascript targeting Safari only

We often say Safari and Chrome are the same in terms of HTML and CSS behaviours but it’s not always the case. Here is a bit of javascript to target Safari only. 

Chrome has both ‘Chrome‘ and ‘Safari‘ inside userAgent string.
Safari has only ‘Safari‘.

In native javascript:


var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
var is_explorer = navigator.userAgent.indexOf('MSIE') > -1;
var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
var is_safari = navigator.userAgent.indexOf("Safari") > -1;
var is_opera = navigator.userAgent.toLowerCase().indexOf("op") > -1;
if ((is_chrome)&&(is_safari)) { is_safari = false; }
if ((is_chrome)&&(is_opera)) { is_chrome = false; }

Usage:
if (is_safari) { alert('Safari'); }

Or for Safari only, use this :


if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {alert('Its Safari');}

 

Source: http://stackoverflow.com/questions/5899783/detect-safari-chrome-ie-firefox-opera-with-user-agent

5
Leave a Reply

4 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
  Subscribe  
newest oldest
Notify of
nomdedieu

dont work on ios 10, iphone 6 , chrome work over webkit, useragent include safari string :(
not a reliable way to do this

Gabriel Moncea

you can try
let is_iPad = navigator.userAgent.includes(“iPad”)
let is_iPhone = navigator.userAgent.includes(“iPhone”)

titusjin

thanks for the info but mobile devices not included into the concern

Thanks your efforts are appreciated

Alicia Hubbard

Got this working for detecting ios safari, while avoiding false positives on chrome or firefox:
var nav = window.navigator;
var ua = nav.userAgent;

if(ua.indexOf(‘iPhone’)!=-1 && ua.indexOf(‘Safari’)!=-1 && ua.indexOf(‘CriOS’)==-1 && ua.indexOf(‘FxiOS’)==-1)

hope this helps someone else looking to solve the same problem!