Wednesday 8 Dec 2010

Activate mobile style in Javascript

CSSIn the previous article, I've showed you how to detect the mobile phones in PHP in a simple way and with a minimum of resources.

To remain most accessible possible, it's good to leave the choice to the visitors to use the mobile or normal version of your Web site. It's possible to manage that in PHP with a session cookie which will keep the preferences of the visitor. I find that to manage this change in Javascript has several advantages:

  1. speed: the change is instantaneous and avoids any page reloading,
  2. saving band-width: no additional transfer is necessary,
  3. no cookie is placed if the visitor does not change voluntarily the style,
  4. it's funnier.

~

It's the method I implemented on this blog. The link to the mobile version is not ideally placed, the best is to put it on the top left, where a cellphone will show it as soon as opening the site.

By clicking on it, that it changes the CSS using Javascript. Mobile CSS places this text "mobile version" on the top right for the visitors to understand they are on the mobile version. Because the mobile browsers use this CSS style immediately. The link is there only to allow to switch version for those who want. :-)

~

To be precise, in my mobile version, there is no HTML changes, only a CSS style more adapted to the mobiles is added: no absolute positions for the side columns, they are at the end taking the width of the screen, the tabs become vertical so that the site is displayed in height. So it can be readable on a screen of only 200 pixels large, but the page is much longer.

How to proceed

In HTML we must indicate an alternative CSS style. Opera and Firefox allow to change style, but that menus are little visible and little known so the Javascript is also useful to them.

<?php
$mobile = mobile_detection();
?>
 
<link rel="<? if ($mobile == false) echo 'alternate '; ?>stylesheet" type="text/css" href="style/mobile.css" media="screen" title="Mobile" id="mobile" />
 
<?
if ($mobile == true)
  echo '<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=0.25" />';
?>

The mobile style is sent by default to the mobiles as the main. Somewhere in the pages, this false-link in Javascript allows to activate/deactivate this secondary style:

<span onclick="javascript: mobileStyle();" title="Switch desktop/mobile style">Mobile version</span>

And in the Javascript, the following function allows to switch from one style to other:

function mobileStyle()
{
	l = document.getElementById("mobile");
	/* This is the link element of the CSS style. */
	if (l.disabled == true)
		l.disabled = false;
	else
		l.disabled = true;
}

You can find the complete version with the cookie creation in my own a href="http://azure-dev.kizone.net/wp-content/plugins/comments.js">Javascript file.

~

As always on Azure Dev, this is only an inspiration for others developers. This is not a tutorial, nor a code to copy-paste blindly! ;-) You can see the result here with the false-link "Mobile version" in the left column.


cafĂ© Did this article help you? 
Buy me a coffee!

2 answers at “Activate mobile style in Javascript”

  1. Backlink from Frank MacDonald » Activate mobile style in Javascript – HTML & CSS – Azure Dev
  2. Backlink from Better PHP mobile phone detection - HTML & CSS - Azure Dev
Azure Dev