Change Stylesheet and Initialscale for Android Browsers

To make stuff work in Android you can use this function in the header.php

1. This replaces the call to the default stylesheet, so if you use this, you need to take out the normal stylesheet line.

2. Most of the heavy lifting seems to be happening with adjusting the initialscale in the viewport meta tag. The biggest issue we have found with Android deals with initialscale. Changing it to 0.25 seemed to make it load the full screen. Though really small it is what most clients seem to want.

3.That said, the function also loads a separate stylesheet for Android – android.css. You will need to create this css file. It should initially be a copy of the normal css file. From there you can tweak styles in that file to work better with Android.

<?php  /* LOAD DIFFERENT STYLESHEET FOR ANDROID */
//detect android browsers
	function detect_mobile() {
    	if(preg_match('/android/i', $_SERVER['HTTP_USER_AGENT']))
        	return true;
 
	    else
    	    return false;
	}
//change stylesheet url depending on detection
	 if( detect_mobile() ) {
		$style = get_bloginfo( 'stylesheet_directory' );
		$style .= '/android.css';
		$initialscale = 'initial-scale=0.25';
	}
	else {
		$style = get_bloginfo( 'stylesheet_url' );
	}
?>
<?php /*echo $style inside stylesheet link. Note: have android.css call style.css */?>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo $style; ?>" />

<meta name="viewport" content="width=device-width, <?php echo $initialscale; ?>" />