HTML web pages for mobile devices

The iPhone and other smart phones have become very popular because in addition to making telephone calls they can also access the Internet, play music, take photographs and record videos.  Tablets like the iPad are also increasing in popularity because they are lightweight and eliminate the need for a keyboard, but they can perform many of the functions of a computer.  Before tablets were introduced, “mobile devices” were telephones with small screens that could only handle small web pages.  Web programmers were encouraged to redirect traffic from mobile devices to a mobile subdomain containing streamlined web pages that would load fast and format data for the small screens.

Telephone manufacturers reacted to the need for accessing the Internet by introducing bigger screens with higher resolution and by developing pinch-in and pinch-out zoom gestures to make the text more readable.  The variety of mobile devices and the way in which the pixels of web pages are mapped to the screens has made it difficult to design optimum mobile web pages, particularly with the introduction of tablets with displays equivalent to a laptop or a desktop computer.

The increasing number of tablets means that it may not be appropriate to automatically redirect mobile devices to web pages for small screens.  A more practical approach is to let the user decide which format to access by providing a button such as the following that is displayed close to the top of the page for mobile devices only.

The following code sets up a non-display <div> element containing the image.  The JavaScript code that follows checks the screen width and the userAgent to allow the display of the button for screens with a width smaller than 500 pixels or for web browsers used by mobile devices.  The BMI web page ( uses this code. View the page with a desktop computer and with a mobile device to see this technique in action.

<div id="mobile" style="display:none;">
  <a href="">
    <img src="mobile-page.gif" width="100" height="71" alt="view mobile page"/>

<script type="text/javascript"><!--
if (screen.width < 500 || 
    navigator.userAgent.match(/Android/i) || 
    navigator.userAgent.match(/iPhone/i) || 
    navigator.userAgent.match(/BlackBerry/i) || 
    navigator.userAgent.match(/webOS/i) || 
    navigator.userAgent.match(/iPod/i) ) {
      document.getElementById('mobile').style.display = "block";