CODEWITHSUNDEEP
phpcssmobilejoomladetection
TCD Factory
TCD Factory

Reputation: 2524

Need to detect mobile browser and load mobile.css file for Joomla template with PHP

I need to detect if somebody is using a mobile browser (media queries aren't enough in this situation) via php and then load a mobile.css file to override a few lines of css due to lack of proper support for some code I'm using. I'm building a joomla template, so I need it to dynamically generate the path to the css file. So, am I doing this right? Example:

<?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");

if ($iphone || $android || $palmpre || $ipod || $berry == true) 
{ 
echo "<link rel="stylesheet" href="$this->baseurl/templates/$this->template/css/mobile.css" type="text/css">";
}
?>

Upvotes: 2

Views: 7444

Answers (3)

piotr_cz
piotr_cz

Reputation: 9608

In Joomla there's mobile detection built in.

If you are using Joomla 3.0, you may use:

<?php
$templateUrl = $this->baseurl . '/templates/' . $this->template;
$doc         = JFactory::getDocument();
$appWeb      = new JApplicationWeb; // new JWebClient; (in Joomla 2.5)

if ($appWeb->client->mobile)
{
    $doc->addStyleSheet($templateUrl . '/css/mobile.css');
}
?>

in Joomla 2.5 or lower you'd use $appWeb = new JWebClient

in Joomla 3.4 you'll probably use if (JFactory::getApplication()->client->mobile)

I didn't find documentation page, but you may always inspect source code

By the way, check out responsive frameworks. It takes time to learn but it's worth to.

Upvotes: 10

Mallard
Mallard

Reputation: 308

As you made clear in your comments that you wish to use your own approach please note that your if statement and the echo is problematic: As stated in the docs, strpos returns an integer or FALSE so your soft boolean comparison with == would not work since a result of integer 0 is a positive match but gets implicitily converted to FALSE. Also your echo is not escaped; I'd encourage you to use single quotation marks to reduce the risk of missing escaping. An updated code addressing those issues would be like:

// ... $iphone = strpos(... etc

if($iphone !== false || $android !== false || $palmpre !== false || $ipod !== false || $berry !== false)
{
  echo('<link rel="stylesheet" href="' . $this->baseurl . '/templates/' . $this->template . '/css/mobile.css" type="text/css">');
}

Upvotes: 0

chandresh_cool
chandresh_cool

Reputation: 11830

There are libraries available like Mobile_Detect you can use them to detect which channel you are using either desktop, mobile or tablet and can load css accordingly. You can find the download link here

Follow this steps:

1 Download the Mobile_detect file from the above link.

2 Put the file in some folder of your project

3 Now include that file in the page where you want to check if the channel is mobile or desktop. i.e include mobile_detect.php (something like this) 4) Then once you include the above file do this 

$this->detect = new Mobile_Detect;
$channel = 'desktop';

if ($this->detect->isTablet() || 't' == $_REQUEST['device']) {
    $channel = 'tablet';
} elseif ($this->detect->isMobile() || 'm' == $_REQUEST['device']) {
     $channel = 'mobile';
}

So your $channel variable will have the channel, with this variable you can check if $channel is not equal to desktop then it will be mobile. And you can load mobile.css accordingly. Hope it helps.

Upvotes: 2

Related Questions