Website and Iphones

davidh6781

davidh6781

Messages
1,181
Name
David
Edit My Images
Yes
Over the weekend i was surfing the web on a couple of site on both Desktop and the Iphone, my question is this.

How does 1 particular site have a normal browser version and an iphone version?

I get a feeling theres a script which reads what is viewing the site etc and diverts you accordingly.

Any help on how to do this with 1 site would be great.
 
I know there's a plugin for Wordpress that lets iPhones go to a mobile version but I don't know how it works...
 
A quick Google suggested this code;

Code: 
<? PHP
 
/*
Put here any PHP code - i.e. the detection script
AND/OR any functions, includes, etc.
       ...
       ...
*/
 
/*
Now, it's **VERY IMPORTANT**
This holds the entire page's output buffer, until it's time to SEND HEADERS
*/
[B]ob_start();[/B]
?>
 
        <HTML>
        <!-- Your HTML code here, if any - i.e. your CSS, JS and title
               ...
               ...
        -->
        </HTML>
 
<? PHP
if($mobile_browser>0) {
   // YES MOBILE - do something
   header("Location: mobile.php"); // go to mobile URL
}
else {
   // NOT MOBILE - do something else
   header("Location: desktop.php"); // go to desktop URL
}
 
/*
Now, it's **VERY IMPORTANT AGAIN**
This allows headers & content to be sent to the browser
*/
[B]ob_end_flush();[/B]
?>
From: http://mobiforge.com/developing/story/lightweight-device-detection-php

I highly recommend reading the whole page - it's quite insightful and contains lots more information than I've posted above!
 
The browser will send it's name and version as part of the request it makes for a page (Google for "user-agent") and the site can make a decision based on this about how it renders the page.
The user-agent value isn't 100% reliable though as it can easily be altered to something else using browser plugins.
 
you declare a different css for each browser. so if the user isn't lading your site fromfirefox/safari etc. it will divert to a cut down (usually less graphics) version of your site. for example
<!--[if IE 7]><link type="text/css" rel="stylesheet" href="YOURSTYLESHEET.css" /><![endif]-->
 
On my own site I use the following:

<!--<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />-->

Means you don't mix up safari mobile with safari desktop (which report very similar user-agents).
 
You must log in or register to reply here.
Back
Top