How to detect chrome and safari browser webkit

Question

I am trying to detect the chrome and safari browser using jquery or javascript   I thought we are not supposed to use jQuery browser  Are there any suggestions here  Thanks a lot

User · Answer

Instead of detecting a browser  you should rather detect a feature  whether it s supported or not   This is what Modernizr does   Of course there are cases where you still need to check the browser because you need to work around an issue and not to detect a feature  Specific WebKit check which does not use jQuery   browser   var isWebKit     window webkitURL    As some of the comments suggested the above approach doesn t work for older Safari versions  Updating with another approach suggested in comments and by another answer   var isWebKit    WebkitAppearance  in document documentElement style

User · Answer

you can use this minified jQuery snippet to detect if your user is viewing using a mobile device  If you need to test for a specific device I   ve included a collection of JavaScript snippets below which can be used to detect various mobile handheld devices such as iPad  iPhone  iPod  iDevice  Andriod  Blackberry  WebOs and Windows Phone          jQuery browser mobile  http   detectmobilebrowser com      jQuery browser mobile will be true if the browser is a mobile device            function a  jQuery browser mobile  android  mobile avantgo bada  blackberry blazer compal elaine fennec hiptop iemobile ip hone od  iris kindle lge  maemo midp mmp netfront opera m ob in i palm  os   phone p ixi re   plucker pocket psp symbian treo up  browser link  vodafone wap windows  ce phone  xda xiino i test a    1207 6310 6590 3gso 4thp 50 1-6 i 770s 802s a wa abac ac er oo s-  ai ko rn  al av ca co  amoi an ex ny yw  aptu ar ch go  as te us  attw au di -m r  s   avan be ck ll nq  bi lb rd  bl ac az  br e v w bumb bw- n u  c55  capi ccwa cdm- cell chtm cldc cmd- co mp nd  craw da it ll ng  dbte dc-s devi dica dmob do c p o ds 12 -d  el 49 ai  em l2 ul  er ic k0  esl8 ez  4-7 0 os wa ze  fetc fly -    g1 u g560 gene gf-5 g-mo go  w od  gr ad un  haie hcit hd- m p t  hei- hi pt ta  hp  i ip  hs-c ht c -     a g p s t  tp  hu aw tc  i- 20 go ma  i230 iac   -    ibro idea ig01 ikom im1k inno ipaq iris ja t v a jbro jemu jigs kddi keji kgt      klon kpt  kwc- kyo c k  le no xi  lg  g   k l u  50 54 e- e  - a-w   libw lynx m1-w m3ga m50  ma te ui xo  mc 01 21 ca  m-cr me di rc ri  mi o8 oa ts  mmef mo 01 02 bi de do t -   o v  zz  mt 50 p1 v   mwbp mywa n10 0-2  n20 2-3  n30 0 2  n50 0 2 5  n7 0 0 1  10  ne  c m - on tf wf wg wt  nok 6 i  nzph o2im op ti wv  oran owg1 p800 pan a d t  pdxg pg 13 -  1-8  c   phil pire pl ay uc  pn-2 po ck rt se  prox psio pt-g qa-a qc 07 12 21 32 60 - 2-7  i-  qtek r380 r600 raks rim9 ro ve zo  s55  sa ge ma mm ms ny va  sc 01 h- oo p-  sdk  se c - 0 1  47 mc nd ri  sgh- shar sie - m  sk-0 sl 45 id  sm al ar b3 it t5  so ft ny  sp 01 h- v- v   sy 01 mb  t2 18 50  t6 00 10 18  ta gt lk  tcl- tdg- tel i m  tim- t-mo to pl sh  ts 70 m- m3 m5  tx-9 up  b g1 si  utst v400 v750 veri vi rg te  vk 40 5 0-3  -v  vm40 voda vulc vx 52 53 60 61 70 80 81 83 85 98  w3c -    webc whit wi g  nc nw  wmlb wonu x700 xda - 2 g  yas- your zeto zte- i test a substr 0 4     navigator userAgent  navigator vendor  window opera     Example Usage   if jQuery browser mobile    console log    You are using a mobile device         else   console log    You are not using a mobile device           Detect iPad  var isiPad    ipad i test navigator userAgent toLowerCase     if  isiPad            Detect iPhone  var isiPhone    iphone i test navigator userAgent toLowerCase     if  isiPhone            Detect iPod  var isiPod    ipod i test navigator userAgent toLowerCase     if  isiPod            Detect iDevice  var isiDevice    ipad iphone ipod i test navigator userAgent toLowerCase      if  isiDevice            Detect Andriod  var isAndroid    android i test navigator userAgent toLowerCase      if  isAndroid            Detect Blackberry  var isBlackBerry    blackberry i test navigator userAgent toLowerCase      if  isBlackBerry            Detect WebOs  var isWebOS    webos i test navigator userAgent toLowerCase      if  isWebOS            Detect Windows Phone  var isWindowsPhone    windows phone i test navigator userAgent toLowerCase      if  isWindowsPhone

User · Answer

I am trying to detect the chrome and safari browser using jquery or javascript    Use jQuery browser     I thought we are not supposed to use jQuery browser    That s because detecting browsers is a bad idea  It is still the best way to detect the browser  when jQuery is involved  if you really intend to do that

User · Answer

WebKit  test navigator userAgent      that s it

User · Answer

Many answers here   Here is my first consideration   Without JavaScript  including the possibility Javascript is initially disabled by the user in his browser for security purposes  to be white listed by the user if the user trusts the site   DOM will not be usable because Javascript is off   Programmatically  you are left with a backend server-side or frontend client-side consideration    With the backend  you can use common denominator HTTP  User-Agent  request header and or any possible proprietary HTTP request header issued by the browser to output browser specific HTML stuff   With the client site  you may want to enforce Javascript to allow you to use DOM  If so  then you probably will want to first use the following in your HTML page    lt noscript gt This site requires Javascript  Please turn on Javascript  lt  noscript gt    While we are heading to a day with every web coder will be dependent on Javascript in some way  or not   today  to presume every user has javascript enabled would be design and product development QA mistake     I ve seen far too may sites who end up with a blank page or the site breaks down because it presumed every user has javascript enabled  No  For security purposes  they may have Javascript initially off and some browsers  like Chrome  will allow the user to  white list the web site on a domain by domain basis    Edge is the only browser I am aware of where Microsoft made the decision to completely disable the user s ability to turn off Javascript   Edge doesn t offer a white listing concept hence it is one reason I don t personally use Edge   Using the  tag is a simple way to inform the user your site won t work without Javascript   Once the user turns it on and refreshes reload the page  DOM is now available to use the techniques cited by the thread replies to detect chrome vs safari   Ironically  I got here because I was updating by platform and google the same basic question  chrome vs sarafi   I didn t know Chrome creates a DOM object named  chrome  which is really all you need to detect  chrome  vs everything else   var isChrome   typeof chrome       object    If true  you got Chrome  if false  you got some other browser   Check to see if Safari create its own DOM object as well  if so  get the object name and do the same thing  for example   var isSafari    typeof safari       object     Hope these tips help

User · Answer

Most of the answers here are obsolete  there is no more jQuery browser  and why would anyone even use jQuery or would sniff the User Agent is beyond me   Instead of detecting a browser  you should rather detect a feature  whether it s supported or not    The following is false in Mozilla Firefox  Microsoft Edge  it is true in Google Chrome   quot webkitLineBreak quot  in document documentElement style  Note this is not future-proof  A browser could implement the -webkit-line-break property at any time in the future  thus resulting in false detection  Then you can just look at the document object in Chrome and pick anything with webkit prefix and check for that to be missing in other browsers

User · Answer

If you dont want to use   browser  take a look at case 1  otherwise maybe case 2 and 3 can help you just to get informed because it is not recommended to use   browser  the user agent can be spoofed using this   An alternative can be using jQuery support that will detect feature support and not agent info   But     If you insist on getting browser type  just Chrome or Safari  but not using   browser  case 1 is what you looking for       This fits your requirement   Case 1   No jQuery and no   browser  just javascript   Live Demo  http   jsfiddle net oscarj24 DJ349   var isChrome    Chrome  test navigator userAgent   amp  amp   Google Inc  test navigator vendor   var isSafari    Safari  test navigator userAgent   amp  amp   Apple Computer  test navigator vendor    if  isChrome  alert  You are using Chrome     if  isSafari  alert  You are using Safari         These cases I used in times before and worked well but they are not recommended     Case 2   Using jQuery and   browser  this one is tricky   Live Demo  http   jsfiddle net oscarj24 gNENk     document  ready function            Get browser          browser chrome    chrome  test navigator userAgent toLowerCase             Detect Chrome        if   browser chrome              Do something for Chrome at this point               Finally  if it is Chrome then jQuery thinks it s             Safari so we have to tell it isn t              browser safari   false                Detect Safari        if   browser safari              Do something for Safari                 Case 3   Using jQuery and   browser   elegant  solution   Live Demo  http   jsfiddle net oscarj24 uJuEU     browser chrome     browser webkit  amp  amp    window chrome    browser safari     browser webkit  amp  amp   window chrome   if    browser chrome  alert  You are using Chrome     if    browser safari  alert  You are using Safari

User · Answer

jQuery provides that   if    browser webkit               Further reading at http   api jquery com jQuery browser   Update  As noted in other answers comments  it s always better to check for feature support than agent info  jQuery also provides an object for that  jQuery support  Check the documentation to see the detailed list features to check for

User · Answer

There is still quirks and inconsistencies in 2019  For example with scaled svg and pointer events  between browsers  None of the answer of this topic are working anymore   maybe those with jquery  Here is an alternative  by testing with javascript if a css rule is supported  via the native CSS support api  Might evolve  to be adapted  Note that it s possible to pass many css rules separated by a semicolon  for the finest detection   x000D   x000D  if  CSS supports    -webkit-box-reflect unset         console log  WEBKIT BROWSER        More math       else     console log  ENJOY      x000D   x000D   x000D    x000D   x000D  if  CSS supports    -moz-user-select unset         console log  FIREFOX         x000D   x000D   x000D   Beware to not use it in loops  for performance it s better to populate a constant on load  const ff   CSS supports  quot   -moz-user-select unset   quot   if  ff             Using CSS only  the above would be   x000D   x000D   supports  -webkit-box-reflect unset      div       background  red         supports  -moz-user-select unset      div       background  green       x000D   lt div gt    Hello world    lt  div gt  x000D   x000D   x000D   List of possible -webkit- only css rules  List of possible -moz- only rules  Can I use css support

[javascript] How to detect chrome and safari browser (webkit)

Examples related to javascript

Examples related to jquery