How to get a website to detect an iPhone / iPad or smart phone?

I'm just wondering how can I get my site to switch over to a new smaller version that I will build to work with smartphones and tablets?

Is there a way and what do I need to do to get my site to detect whats being used to visit it and adjust it's size to the correct phone/tablet.

I will build a new version for them but what I need to know is the following.

- what format is best
- what script do I need and where can I get it to detects what is being used
- anything else I should know?

Is for my current site swift productions

Like what's the best way to get started and get it working correctly so my current site changes to the new correct version for either iPad or iPhone or smart phone

Thanks heaps

 

Depends on your site but if you're using php you can try getting the browser with $_SERVER["HTTP_USER_AGENT"] and then load the appropriate version of your site according to users' browser.

 

What do you mean. Can you explain a little more. Coz my programmer is away for a week or 2 so I'd appreciate more information

Thanks

 

put the following code in browser.php (or anything_else.php)

<?php
echo $_SERVER["HTTP_USER_AGENT"];
?>

PHP:

now put the file on your server and open it with different browsers. you'll see that part of the output is the browser's name.

now using an if statement you can show different versions of your page:

<?php
...
if($browser='firefox'){
     header('Location: http://www.example.com/firefox_version/');
}
elseif($browser='whatever'){
     header('Location: http://www.example.com/whatever_version/');
}
...
?>

PHP:

keep in mind this code does not do what you want exactly because i just typed the key elements so you get the idea and write the code yourself.

 

Ok so i keep using the 'if statement' for each browser? One firefox,ie,chrome etc??

How will it differ from ie6 to ie9?

Sorry for all the questions

And if a different browser goes to it it will switch to the other version... Is tht correct?

But I'm just wondering how will it know the difference between 'safari' for iPhone/iPad or 'safari' for pc or mac?

Thanks mate appreciate your help

 

You don't have to use it for every and each browsers. just the ones that you want a different version for. $_SERVER["HTTP_USER_AGENT"] has data on both OS and browser(just try the first code(the one with echo) on different browsers and you'll see). say you extract it in $browser and $os and do it like this:

<?
...
if($browser='Safari' && $os='iOS'){
     header('Location: http://www.example.com/iOS_version/');
}
elseif($browser='something_else' && $os='something_else'){
     header('Location: http://www.example.com/something_else_version/');
}
else{
     header('Location: http://www.example.com/normal_version/');
}
...
?>

PHP:

if you're just targeting iOS then there's no need for the elseif part. if you're targeting more you can just add as many elseif statements as you want(between the if in the beginning and the else at the end). Also you just need to use if for special cases since the normal version(which is addressed in the else part of the code) will probably work on major browsers like IE, FF, Chrome and so one.

 

Thanks sepher. I'm budding php developer. This thread very helpful for me. I appreciate your helping mind. Thanks a lot.

 

Thanks sepher,

That's make it a lot clearer now.

I appreciate your help,

I'll be starting on it soon so if I get stuck mind if I ask my question here?

Thanks

 

Here is what I'm using:

<?php

$mobile_browser = '0';
 
if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
}
 
if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
}    
 
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda ','xda-');
 
if (in_array($mobile_ua,$mobile_agents)) {
    $mobile_browser++;
}
 
/*
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {
    $mobile_browser++;
}
*/
 
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {
    $mobile_browser = 0;
}
 
if ($mobile_browser > 0) {
   header('Location: http://m.site.com');
}

PHP:

 

Use different css style. That all.
Example:

<link href="css/main.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 768px)" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

HTML: