Detect iPhone Browser
is there a script to detect, if the visitor use iphone (whatever it's browser, may iphone Safari, iPhone for Opera or etc.)?
Then will shutdown some some of my JavaScript.
Thanks...
Answers
searching on the net there are two common ways of achieving this. My favorite though is in PHP its just so clean? wow. :D
In PHP you can write
<?php function isIphone($user_agent=NULL) { if(!isset($user_agent)) { $user_agent = isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : ''; } return (strpos($user_agent, 'iPhone') !== FALSE); } if(isIphone()) { header('Location: http://www.yourwebsite.com/phone'); exit(); } // ...THE REST OF YOUR CODE HERE ?>
and in javascript you can write
var agent = navigator.userAgent; var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ; if (isIphone) { window.location.href = 'http://www.yourwebsite.com/phone'; }
Hope that helps.
PK
The conventional wisdom is that iOS devices have a user agent for Safari and a user agent for the UIWebView. This assumption is incorrect as iOS apps can and do customize their user agent. The main offender here is Facebook.
Compare these user agent strings from iOS devices:
# iOS Safari iPad: Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3 iPhone: Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3 # UIWebView iPad: Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/98176 iPhone: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Mobile/8B117 # Facebook UIWebView iPad: Mozilla/5.0 (iPad; U; CPU iPhone OS 5_1_1 like Mac OS X; en_US) AppleWebKit (KHTML, like Gecko) Mobile [FBAN/FBForIPhone;FBAV/4.1.1;FBBV/4110.0;FBDV/iPad2,1;FBMD/iPad;FBSN/iPhone OS;FBSV/5.1.1;FBSS/1; FBCR/;FBID/tablet;FBLC/en_US;FBSF/1.0] iPhone: Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; ru_RU) AppleWebKit (KHTML, like Gecko) Mobile [FBAN/FBForIPhone;FBAV/4.1;FBBV/4100.0;FBDV/iPhone3,1;FBMD/iPhone;FBSN/iPhone OS;FBSV/5.1.1;FBSS/2; tablet;FBLC/en_US]
Note that on the iPad, the Facebook UIWebView's user agent string includes 'iPhone'.
The old way to identify iPhone in JavaScript:
IS_IPHONE = navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);
If you were to go with this approach for detecting iPhone, you would end up with IS_IPHONE being true if a user comes from Facebook on an iPad. That could create some odd behavior!
The correct way to identify iPhone in JavaScript:
IS_IPAD = navigator.userAgent.match(/iPad/i) != null; IS_IPHONE = (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null); if (IS_IPAD) { IS_IPHONE = false; }
We declare IS_IPHONE to be false on iPads to cover for the bizarre Facebook UIWebView iPad user agent. This is one example of how user agent sniffing is unreliable. The more iOS apps that customize their user agent, the more issues user agent sniffing will have. If you can avoid user agent sniffing (hint: CSS Media Queries), DO IT.
//Detect special conditions devices $iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod"); $iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone"); $iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad"); $Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android"); $webOS = stripos($_SERVER['HTTP_USER_AGENT'],"webOS"); //do something with this information if( $iPod || $iPhone ){ //browser reported as an iPhone/iPod touch -- do something here }else if($iPad){ //browser reported as an iPad -- do something here }else if($Android){ //browser reported as an Android device -- do something here }else if($webOS){ //browser reported as a webOS device -- do something here }
<script language="javascript" type="text/javascript"> //This redirects iPhone users to the iPhone-friendly site if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1)) { document.location = "http://i.yoursite.com"; }
This script checks for iPhone or iPod in the userAgent and then executes an action. Give this a try.
Although I like the answers here, I think its better to use the following ...
http://www.htaccesstools.com/articles/detect-and-redirect-iphone/
RewriteEngine on RewriteCond %{HTTP_USER_AGENT} iPhone RewriteRule .* http://iphone.example.com/ [R]
OR
RewriteEngine on RewriteCond %{HTTP_USER_AGENT} iPhone RewriteCond %{REQUEST_URI} !^/my-iPhone-site/ RewriteRule .* /my-iPhone-site/ [R]
This is a .htaccess alternative, which means leaves you more room to deal with php :) hope it helps
Late, indirect answer to this question, but I found it useful.
Instead of redirecting mobile users, consider using responsive CSS design to deliver desktop and mobile users the same content with two different styles. This helps avoid splitting and duplicating code. You can code responsive CSS from scratch, or use prepackaged frameworks like Twitter Bootstrap.