Styleswitcher or themeswitcher to allow user to switch back to standard view from mobile device

2 Views

I created a mobile version of my site with CSS, with all my styles in a single stylesheet (using @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) to define mobile styles). When it’s all in a single stylesheet, it works fine.

But I want to allow users to switch back to standard view even if they view the site from a mobile device. I don’t know of any way to allow the user to override the @media, so it seems I have two options: (1) separate stylesheets plus styleswitcher script, or (2) separate themes plus themeswitcher.

Read More

Theoretically this should be possible with a styleswitcher, but I can’t figure out how to get a styleswitcher to override the media declaration in the header, so even when I click “switch back to standard view,” it still loads the mobile stylesheet.

So then I started looking into themeswitchers. I want to detect mobile users and direct them to the mobile theme by default, but still allow them to switch back if they want.

This is essentially what the WP Mobile Pack plugin does, but it has a lot of extra functionality that I don’t need, and I’ve read some horror stories about the way it modifies the database. I also don’t need all the pre-built mobile themes since I’ve already written the CSS I need for the mobile version.

Can anybody recommend a more lightweight solution, like a simple themeswitcher script combined with a mobile-detection plugin that doesn’t require me to define media queries in the header?

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Wouldn’t it be enough to switch mobile/desktop via a $_SESSION variable, make the “switch to desktop link” include something like ?switchtodesktop=1 and have the header contain something like

    session_start();
if ($_GET['switchtodesktop']) {
  $_SESSION['switchtodesktop'] = true;
}
$desktop = isset($_SESSION['switchtodesktop']);
[...]
if ($desktop) {
  // only desktop css without media queries
} else {
  // default stuff (media queries, like you have now ..)
}

  2. You can use the global $is_iphone to determine if you’re on a mobile device or not. Don’t care about the name. It catches other devices as well.