in iOS, is there a way to detect if a web page is loaded with SFSafariViewController vs the normal Safari Browser using Javascript?

Question

Is there a way to detect if a web page is loaded with SFSafariViewController vs the normal Safari Browser using Javascript?

Answer 1

You can check for the existence of the obscure system font .Helvetica LT MM in a canvas. Use the following Github Gist, and then call isInsideSFSafariViewController().

Note that this can break at any time with a new release, so your code should gracefully fall back.

https://gist.github.com/aeharding/08eaafbb7742f78ede9b8d2f5d096354

Answer 2

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}