Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Determine if user navigated from mobile Safari

I have an app, and I'd like to redirect the users to different pages based on where they are navigating from.

If navigating from web clip, do not redirect. If navigating from mobile Safari, redirect to safari.aspx. If navigating from anywhere else, redirect to unavailable.aspx

I was able to use iPhone WebApps, is there a way to detect how it was loaded? Home Screen vs Safari? to determine if the user was navigating from a web clip, but I'm having trouble determining if the user navigated from mobile Safari on an iPhone or iPod.

Here's what I have:

if (window.navigator.standalone) {     // user navigated from web clip, don't redirect } else if (/*logic for mobile Safari*/) {     //user navigated from mobile Safari, redirect to safari page     window.location = "safari.aspx"; } else {     //user navigated from some other browser, redirect to unavailable page     window.location = "unavailable.aspx"; } 
like image 325
Steven Avatar asked Jun 09 '10 15:06

Steven


People also ask

How do I know which browser client to use?

To detect user browser information we use the navigator. userAgent property. And then we match with the browser name to identify the user browser. Now call this JS function on page load, and this will display the user browser name on page load.

Can you use Find on Safari Mobile?

You can Control-F search on an iPhone in the Safari, Chrome, and Messages apps. Roman Stavila/iStock/Getty Images Plus. You can do a Control-F search on an iPhone's browser by using the "On This Page," "Find in Page," or Share features.

What is Mobile Safari?

Safari is the best way to experience the internet on all your Apple devices. It brings robust customization options, powerful privacy protections, and industry-leading battery life — so you can browse how you like, when you like. And when it comes to speed, it's the world's fastest browser.


2 Answers

See https://developer.chrome.com/multidevice/user-agent#chrome_for_ios_user_agent - the user agent strings for Safari on iOS and for Chrome on iOS are inconveniently similar:

Chrome

Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en) AppleWebKit/534.46.0 (KHTML, like Gecko) CriOS/19.0.1084.60 Mobile/9B206 Safari/7534.48.3

Safari

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

Looks like the best approach here is to first of all check for iOS as other answers have suggested and then filter on the stuff that makes the Safari UA unique, which I would suggest is best accomplished with "is AppleWebKit and is not CriOS":

var ua = window.navigator.userAgent; var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i); var webkit = !!ua.match(/WebKit/i); var iOSSafari = iOS && webkit && !ua.match(/CriOS/i); 
like image 184
unwitting Avatar answered Oct 10 '22 23:10

unwitting


UPDATE: This is a very old answer and I cannot delete it because the answer is accepted. Check unwitting's answer below for a better solution.


You should be able to check for the "iPad" or "iPhone" substring in the user agent string:

var userAgent = window.navigator.userAgent;  if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {    // iPad or iPhone } else {    // Anything else } 
like image 45
Daniel Vassallo Avatar answered Oct 10 '22 23:10

Daniel Vassallo