1

So for those who worked on iOS web applications probably know that due to Apple's policy, Chrome and other mobile browsers on iOS use a very ancient javascript engine. This is why we need to disable some of the rendering for Chrome and other none-safari browsers for iOS.

I had been reading this question and there is no useful answer there. Here are some of my approaches (failed):

Use is_iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g) to detect if the browser is on iOS. And then use:

is_FF = navigator.userAgent.match(/(firefox)/g) and is_Chrome = navigator.userAgent.match(/(chrome)/g)

to kill off those firefox and chrome browsers.

I then realized all the browsers share identical user agent string with iOS safari. So I imagine the method should be running a javascript function that only Safari can run and then determine if the browser is Safari.

Community
  • 1
  • 1
Aero Wang
  • 8,382
  • 14
  • 63
  • 99
  • Might I suggest filtering based on features instead of `userAgent`? For instance: `if (window.localStorage) .....`. – KJ Price Mar 24 '15 at 21:11
  • 1
    @blex I realized all the browsers share identical user agent string with iOS safari. So I imagine the method should be running a javascript function that only Safari can run and then determine if the browser is Safari. – Aero Wang Mar 24 '15 at 21:12
  • 1
    @KJPrice please explain more. This seems to be the right solution. Thanks. – Aero Wang Mar 24 '15 at 21:13

1 Answers1

0

So, there's two schools of thought when choosing which native functionality you should use while working in browsers. One school of thought is checking the userAgent as you are doing here and using/removing features based on the userAgent.

The problem with checking userAgent is that it gets complicated really fast. You have already run into an interesting problem, but what will happen when you find that ie8 does not have the feature you are looking for?

A better solution may be to check if the feature exists in its current context without worrying about userAgent. A great example would be the new HTML5 audio element. Based on browser support, we can tell that it does not exist in ie8 nor Safari < 4.0. Instead of checking if the browser matches the ones mentioned here you can just check if the feature exists. As we know that the audio element is an instance of the Audio class. We can simply check:

if (window.Audio) {
    //load and play the HTML5 audio element here
}

That is much simpler than checking the userAgent.

KJ Price
  • 5,774
  • 3
  • 21
  • 34
  • That definitely provided a good idea! I tried using `window.localStorage` as the detecter and unfortunately both Safari and Chrome returned `true`. – Aero Wang Mar 24 '15 at 21:51
  • Well then `localStorage` works for those browsers. What you said you said here "we need to disable some of the render for Chrome", what do you need to disable? – KJ Price Mar 24 '15 at 21:54
  • In my case specifically I created a javascript rendering engine that can run video directly on the page as the background (instead of calling for the video player), but the frame rate is very low for non-Safari browsers. – Aero Wang Mar 24 '15 at 21:58