PHILADELPHIA REFLECTIONS
Musings of a Philadelphia Physician who has served the community for six decades

Return to Home

Related Topics

Website Development
The website technology supporting Philadelphia Reflections is PHP, MySQL and DHTML. The web hosting service is Internet Planners. The development of this website has provided an opportunity to learn new technology, to try out different techniques for getting noticed by the search engines and the trials and tribulations of dealing with malicious hackers and spammers who range from the annoying to the abusive. This collection of articles documents some of our experiences and we hope that people surfing the web looking for solutions to problems we've encountered will benefit.

Popular Passages
New topic 2013-02-05 15:24:06 description

How to detect an iPhone and other mobile devices

Handheld/mobile devices have been exploding in popularity and with the advent of the iPhone they have become the device of choice. The Blackberry was a lovely device but once you try an iPhone you will never want a Blackberry again. Of course, all of this will change as each new device comes out but what won't change is the fact that mobile devices are supplanting PCs for everything but the most keyboard- or large-screen-intensive work.

Therefore, the popularity of a website/blog/whatever depends on making it accessible to mobile devices. Step one is knowing when you've been visited by such a thing.

iPhones

» Articles

The iPhone is very well-behaved with respect to CSS. Simply include the following meta tag in an otherwise-ordinary web page:

<!--[if !IE]>-->
<link rel="stylesheet" 
  type="text/css" 
  media="only screen and (max-device-width: 480px)" 
  href="iphone.css" />
<!--<![endif]-->

... which points to the iphone.css CSS stylesheet:

body { margin: 0; 
       padding: 0; 
       width: 100%; }				
				
    #wrapper { margin: 0; padding: 0; width: 100%; }
    
      #left    { display: none; }
      
      #right   { display: none; }
		
      #center  { margin: 0; }
      
        #welcome  { display: none; }
        
        #content  { line-height: 115%; 
                    font-family: "Times New Roman", Times, serif; 
                    padding: 5px 20px 0 20px; 
                    margin: 0;
                    font-size: 28px; 
                    background-color: white; }
        
        #comments { display: none; }
        
      #footer  { display: none; }

iphone.css uses { display: none; } to keep the surrounding boxes from displaying on the smaller screen. No other changes are required.

An excellent article on using CSS is here: http://www.bushidodesigns.net/blog/mobile-device-detection-css-without-user-agent/

(Subsequent to writing this article we wrote an iPhone-specific article page. The stylesheet method described does work but we had other reasons to make modifications to the content.)

» Index Page

The index page was a complete rewrite of the standard index page to turn it into a simple table of contents. The breakthrough here was an exquisite PHP script found at http://detectmobilebrowsers.mobi/ which analyzes the HTTP headers to determine if a device is a handheld and if so, what type. Using this, we redirect from the regular index page to the iPhone-specific index page (from index.php to indexiphone.php ... it looks much better on an iPhone than on a PC).

Generic Handheld Devices

We may build more device-specific CSS files and pages as we learn what our visitors use but for the time being we simply support iPhones and Other.

Because many handheld devices have very small screens and a very small buffer capacity, we strip out all HTML comments, images and tables; we also convert to UTF-8 encoding because of the claim that handhelds support it better than iso-8859-1:

$content = preg_replace('/<!-- .*? -->/si', '', $content);
$content = preg_replace('%<table [^>]*?>.*?</table>%si', '', $content);
$content = preg_replace('/<img [^>]*?>/i', '', $content);
echo utf8_encode($content);

We include these meta tags (cribbed from Google's mobile page):

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
<meta name="HandheldFriendly" content="true" />

We also send handheld-specific HTTP headers ... see XHTML vs. HTML for the script we use for all page headers.

» Articles

It turns out in real life that many handhelds don't handle CSS correctly, so the { display: none; } trick that works so well for iPhones is unreliable for many other devices. Furthermore, many devices choke if sent a large data stream. Therefore, we had to write a very stripped-down page for each individual article. This required writing only one new program since all of our content is served from a database.

The http://detectmobilebrowsers.mobi/ function is used to redirect from the regular page to the handheld page.

Examples:

A glance at the page source of each of these pages will show you the extent to which the handheld version is stripped down; rather elegant, really.

Finally, in the regular pages we include this link tag; wishful thinking I suspect:

<link rel="alternate" 
  media="handheld" 
  href="http://www.philadelphia-reflections.com/reflectionsHandheld.php?type=blog&amp;key=####" />

» Index Page

The generic handheld index page (http://www.philadelphia-reflections.com/indexhandheld.php) is an even-more stripped down version of the iPhone index page (http://www.philadelphia-reflections.com/indexiphone.php).

Testing and Validating

The place to start testing your new pages is the Opera Mini Simulator: http://www.opera.com/mini/demo/. Elegant in its simplicity, it has never choked or failed, unlike most other emulators. Plus, it is completely intuitive; unlike all other emulators. And free.

Once you get the basic design underway, you will want to validate ... at http://www.ready.mobi/.

For fine-tuning of displays on cell phones ... http://www.wap-proof.com.


To run the Blackberry emulators on a Windows machine:

I found help for this ridiculous process at http://www.cantoni.org/2007/12/18/blackberrysimulator You may, too.

Only a sadistic socially-crippled geek-savant could have dreamed up such a convoluted mess, but ultimately it does work and does allow you to see how the different models operate. Actually, once you get it working,it's sort of fun to try different models.


(my thanks to http://centricle.com/tools/html-entities/ for HTML encoding)

(1621)

Please Let Us Know What You Think


(HTML tags provide better formatting)

Because of robot spam we ask you to confirm your comment: we will send you an email containing a link to click. We apologize for this inconvenience but this ensures the quality of the comments. (Your email will not be displayed.)
Thank you.