Choosing between various stylesheets

[peoplayer]

Hi guys. This might be an easy question (hopefully) for you to answer. Not sure this is the right place to post the question, since I do not know if this is a CSS issue or a normal PHP programming issue (I know very little about PHP programming), so here goes:

 

I have a wordpress blog that uses three different stylesheets depending on the platform where the blog is viewed (web, ipad, iphone).

 

I recently made a tab on my Facebook page which opens the blog in an iframe, but it opens the web stylesheet which is way too wide for the max width in Facebook tabs (810 px). However, the ipad stylesheet would work just fine there. I still wish to see the normal web view when I enter my web from outside Facebook, so it isn't an option to swith to the ipad-stylesheet as a default stylesheet.

 

Is there a way of passing on a parameter from the facebook tab: e.g. http://www.myblog.com/?style=facebook so that the site that shows inside the facebook tab uses the right stylesheet? I would think more people have had this problem but I have scoured the Internet for hours without knowing really what to look for.

 

This is the code in the header.php that deals with the stylesheets:

<!-- Theme Styles -->
   <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="screen" />
   <?php $disable_theme_features = of_get_option( 'disable_theme_features' ); if ($disable_theme_features['4'] == '0') { ?>
   <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style-ipad.css" type="text/css" media="screen" />
   <?php } if ($disable_theme_features['3'] == '0') { ?>
   <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style-iphone.css" type="text/css" media="screen" />
   <?php } ?>

 

Is there a way to make this happening without resorting to a complete makeover of the template? Any help would be greatly appreciated!! And sorry again if this is a noob question, that is because i am noob at PHP.

 

Thanks again!

[Christian F.]

I'd do a search for CSS media selectors, as you don't need to involve anything but CSS into this one.

[peoplayer]

Thanks, can you guide me in any way of how a solution would look like? When I look at CSS media selectors I find print, web, screen, braille, etc. and I am totally confused. How can I make a stylesheet that acts a special way when being accessed from inside Facebook and another way when accessed from outside? I am surprised this isn't more of a problem as I would think companies would like to be able to present a smaller version of their websites inside an FB tab.

Thanks for your help.

Peo

 

[Christian F.]

There's a pretty good article on them here:

http://webdesignerwall.com/tutorials/css3-media-queries

 

For all of the gory details, you'll need to look here:

http://www.w3.org/TR/css3-mediaqueries/

 

For the Facebook detection, you can use JS to select the correct stylesheet. Or use the Facebook integration, seeing as you'll need that running anyway to have your application work on facebook.