Swapping stylesheets if on mobile browser

Mobile
1

Anyone know a way to swap a linked stylesheet in the header if someone has a mobile browser? I have googled and tried many methods but none seem to be working.

FYI, this is a Wordpress site. I tried theme switching plugins but they didn’t work well. I decided to try just switching stylesheets because that’s all it needs. I have “style.css” and “style-mobile.css” that need to be swapped. Since WP required style.css would something mess up with style-mobile.css? Is there a better way to do this?

I’ve tried :

<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url') ?>" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 1000px)" href="<?php bloginfo('stylesheet_directory'); ?>/style-mobile.css" />

When I look on my iPhone it looks like it’s loading both stylesheets.

I tried a PHP script I found to detect browsers but that didn’t work.

Anyone know the best way to do this?

2

Ok, I got this to work on my iPhone…


<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 1000px)" href="<?php bloginfo('stylesheet_url') ?>" />
	<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />
	<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 1000px)" href="<?php bloginfo('stylesheet_directory'); ?>/style-mobile.css" />

but…

How can I include a link back to the original site?

3

Ok, that solution was a bad one too. It made the stylesheets not load at all in IE.

There’s got to be a standard usable solution for this!