I am currently working through the challenge of making a page responsive to a number of mobile platforms this includes support for Desktop Browsers, iPhone, iPad, BB10 and BB7.
As you know this isn't always the easiest task.
I have come to the point where I would like each device to use a different CSS file as this makes life easier with the different screen sizes.
I found this PHP script which enables me to direct users to a different html pages... It's great although I don't feel its efficient enough.
Instead I would like to be able to have this script serve the users different .css files based on the device.
I have very little PHP understanding and would appreciate some help here.
<?php
// MOBILE
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$blackberry = strpos($_SERVER['HTTP_USER_AGENT'],"BB10");
$blackberry2 = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
// DESKTOP
$windows = strpos($_SERVER['HTTP_USER_AGENT'],"Windows");
$mac = strpos($_SERVER['HTTP_USER_AGENT'],"Mac");
// REDIRECTS
// MOBILE
if ($android == true)
{
header('Location: mobile.html');
}
else if ($blackberry == true)
{
header('Location: mobile.html');
}
else if ($blackberry2 == true)
{
header('Location: mobile.html');
}
else if ($iphone == true)
{
header('Location: mobile.html');
}
else if ($ipad == true)
{
header('Location: mobile.html');
}
// DESKTOP
else if ($windows == true)
{
header('Location: desktop.html');
}
else if ($mac == true)
{
header('Location: desktop.html');
}
?>
You need to parse your CSS trough the PHP.
<link rel="stylesheet" href="css.php">
Then in your php:
<?php
// MOBILE
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$blackberry = strpos($_SERVER['HTTP_USER_AGENT'],"BB10");
$blackberry2 = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
// DESKTOP
$windows = strpos($_SERVER['HTTP_USER_AGENT'],"Windows");
$mac = strpos($_SERVER['HTTP_USER_AGENT'],"Mac");
// REDIRECTS
// MOBILE
if ($android == true)
{
include('android.css');
}
else if ($blackberry == true)
{
include('blackberry.css');
}
// others
But as the guys in comments wrote - this is not the "modern" approach of responsible css.
I want to know why you are using the ancient way, you can use responsive web concept to build the responsive website as per the resolution.
Use twitter bootstrap.js or read this http://getbootstrap.com/