Detect Android/iPhone browsers

[Tryah85]

Hey everyone,

I am currently working on my portfolio website toddhartsfield.com to be fully responsive. Everything seems to work with iPhone and Android fine, but I am annoyed that when I go to my works page on a mobile device the images of my works are bigger than the devices screen. I want to make a new gallery with the same images optimized for say... a typical iPhone/android screen at 72ppi using a jQuery API known as photoswipe. I have used it before and it worked really well.

PHP is not my strong suit... or programming in general. I did make an attempt to make a block of PHP code.

< ?php
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone"); || stristr($_SERVER['HTTP_USER_AGENT'],'android');
if ($browser == true) { echo 'code for photoswipe'; }
elseif ($browser ==false) { echo 'code I already have' }
?>

The code above I tried to make it work by finding if the browser from the client (if it is iPhone OR'||' Android do code B) If neither is found do code A.


Is the code above feasible or is there a better way to put this into a php block?

Thank You in advance!

[Nullsig]

Code: Select all

$user_agent = strtolower ( $_SERVER['HTTP_USER_AGENT'] );
   if ( preg_match ( "/phone|iphone|itouch|ipod|symbian|android|htc_|htc-|palmos|blackberry|opera mini|iemobile|windows ce|nokia|fennec|hiptop|kindle|mot |mot-|webos\/|samsung|sonyericsson|^sie-|nintendo/", $user_agent ) ) {
        // these are the most common
      $isMobile = true;
      } else if ( preg_match ( "/mobile|pda;|avantgo|eudoraweb|minimo|netfront|brew|teleca|lg;|lge |wap;| wap /", $user_agent ) ) {
         // these are less common, and might not be worth checking
      $isMobile = true;
   }else{
      $isMobile = false;
   }


[Tryah85]

Thank you so much for your expertise!!! I will work on this and let you how it turns out... Okay this may seem a dumb, but I want to make sure I would put the code in the right area. Near the end should it be like this:

{
// these are less common, and might not be worth checking
$isMobile = true;
//entering code for photoswipe
}else{
$isMobile = false;
//code I already have.
}

again thank you Nullsig!

[Nullsig]

After the code I supplied you would have a block that says:

Code: Select all

if($isMobile){
//entering code for photoswipe
}else{
//code I already have.
}


[Tryah85]

Thank You! I am still working on this. I will keep an update of how this turns out.

[Tryah85]

I am still planning on exicuting this code on my site hopefully soon. Sorry for the delay.

[seandisanti]

be careful using user agent to determine device, as they can be easily changed etc. you can CSS @media only screen to style based on the size of the screen. here's a good link that has the Media queries for idevices and a couple of others.

http://css-tricks.com/snippets/css/medi ... d-devices/