I’m having some problems with added separate stylesheets when detecting mobile and tablet devices. I currently have the following at the top of my header file to detect mobile devices.
<?php if(strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'mobile') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'mobi') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'android')) { $browser = 'mobile'; } ?>
However when I call the following within my head tags the stylesheet doesn’t get called for some reason.
<?php if($browser == 'mobile'){ ?><link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/stylesheets/mobile.css" /><?php } ?>
I’ve tested the first php code I wrote on this post by adding in echo 'This is a mobile browser'; and this displays fine so the first bit is working. Just no idea why the stylesheet is not being called.
Here’s an example of some css styles in mobile.css
div{
clear:both !important;
display:block !important;
width:100% !important;
float:none !important;
margin:0 !important;
padding:0 !important;
position: static !important;
}
Thanks
You haven’t mentioned the problem of selecting CSS’s using CSS media queries. Do they have a lack?