Mobile Web

The Mobile Web (also refered to as the Mobile Internet) is currently a minimized version of the current world wide web, however many have claimed that until the functionality and capabilities of the Mobile Web and the devices which access it improve, it may be relegated to a scarcely used version of the full Web.

Specifications

Core Mobile Web Platform - 2012: http://coremob.github.com/coremob-2012/
HTML5 for Mobile apps: http://www.whatwg.org/specs/web-apps/current-work/^[1]^[2]^[3]^[4]^[5]
MobileOK (xHTML Basic/MP): http://www.w3.org/TR/xhtml-basic/^[6]^[7]^[8]^[9]^[10] (likely to be superceded by Mobile HTML5 initiatives)
iMode (cHTML): http://www.w3.org/TR/1998/NOTE-compactHTML-19980209/^[11]^[12] (becoming obsolete)
WAP 1.1 technical specs (including WML): http://www.wapforum.org/what/technical_1_1.htm^[13]^[14] (legacy/obsolete)
Mobile Link Discovery spec: http://www.sixapart.jp/docs/tech/mobile_link_discovery_en.html (unofficial)

Approaches

CSS

Specify the media type to render mobile-specific styles:

<link type="text/css" rel="stylesheet" href="style/mobile.css" media="handheld" />

^[19]

media Attribute

The CSS spec actually defines a number of device profiles, however, reliance on these as the only method of deciding device dimensions and presentation can be prone to errors as not all devices and browsers respect or follow the standards in this regard. Some may report the wrong profile or no profile at all.

Projector:

<link type="text/css" rel="stylesheet" href="css/projector.css" media="projection" />

Desktop:

<link type="text/css" rel="stylesheet" href="css/desktop.css" media="screen" />

Television:

<link type="text/css" rel="stylesheet" href="css/tv.css" media="tv" />

Mobile device (i.e. Smartphone, Cellphone, etc):

<link type="text/css" rel="stylesheet" href="css/mobile.css" media="handheld" />

Tablet:

<link type="text/css" rel="stylesheet" href="css/tablet.css" media="only screen and (min-width: 321px) and (max-width: 768px)" >

Printer and other print devices or software (such as a PDF converter, screenshot saver, etc):

<link type="text/css" rel="stylesheet" href="css/printer.css" media="print" />

@media Queries

You can also use the above technique of Media queries inline within <style> tags, or inside of an externally loaded CSS file itself:

 @media handheld {
   .container {
	padding: 0;
	margin: 0;
        width: 100%; /* use % widths to prevent content overflows/resizes on mobile */
   }
   .left {
	padding: 0;
	margin: 0;
        width: 20%;
   }
   .right {
	padding: 0;
	margin: 0;
        width: 80%;
   }
 }

^[20]

Another useful trick is to be able to make an image or lengthy or secondary content section (i.e. within an ASIDE, DIV or P tag) appear only on orientation change:

 .sidebar div { background:url(/img/huge.png) }
 @media only screen and (max-device-width: 480px) {
   .sidebar { display:none }
 }
 @media only screen and (max-device-width: 480px) and (orientation: landscape) {
   .sidebar { display:block }
   .sidebar div { background:url(/img/small.png) }
 }

^[21]

Here's a full list of common queries for different screen resolutions and physical device sizes (organized in order of size, biggest to smallest).

Projectors such as in a home theater system, Work office presentation or board room, or Public Advertisement Display screens (expect HD, inability to read small text and changing dimensions => 2048x1536 and up, even iPad now has these specs with its retina display at 264 pixels per inch (ppi))^[22]

TVs such as "Smartscreens", Google TV, Connected TVs, etc... (typically a widescreen with HD and retina display ==> 1920x1080)

Business, Hardcore Gaming or Developer Computers (usually use widescreen and/or dual screen display ==> 1680x1050)

@media only screen and (max-width: 959px) {  }

Desktops and Laptops (most home PC & Mac users fall into this category ==> 1024x768)^[23]

@media only screen and (max-width: 959px) {  }

Desktops, Laptops or Netbooks with Smaller than standard 960 pixels wide ( ==> 800x600):

@media only screen and (max-width: 959px) {  }

Tablet Portrait size to standard 960 (tablets and browsers ==> 800x1200):^[24]

@media only screen and (min-width: 768px) and (max-width: 959px) {  }

All Smartphone Mobile Sizes (typically only high-end smartphones approach this max-width ==> 640x480) and Tablet Landscape (lower-end portable devices and browsers ==> 600x1024):

 @media only screen and (max-width: 767px) {  }

Mobile Landscape Size (horizontal, left-to-right ==> 480x360) to Tablet Portrait (devices and browsers ==> 480x800):

 @media only screen and (min-width: 480px) and (max-width: 767px) {  }

Mobile Portrait Size (vertical, top-to-bottom ==> 1680x1050) to Mobile Landscape Size (devices and browsers ==> 320x240):

 @media only screen and (max-width: 479px) {  }

Legacy Mobile Phones, these old devices were believe it or not "phones" before they were portable entertainment centers or business tools and range widely in physical screen size, but typically only support video at 176x144:

 @media only screen and (max-width: 320px) {  }

User-Agent

User-Agent string matching or checking can be done to determine on the server-side (or client-side) whether the user is accessing your site via a Mobile Device or larger screened Desktop. This method is subject to abuse though as the User-Agent can be spoofed, hidden, missing (i.e. old device or stripped down) or just plain inaccurate, and should be considered unreliable. However, it can still be used for "suggested" redirecting or basic device/capability checking. Important variables include:

navigator.userAgent
navigator.appName
navigator.appVersion

To list out all User-Agent related information, use the following:

 for (i in navigator) {
  document.write('<br />navigator.' + i + ' = ' + navigator[i]);
 }

^[25] ^[26] ^[27]

 <?php
 
 $mobile_browser = '0';
 
 if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
 }
 
 if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
 }    
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda ','xda-');
 if (in_array($mobile_ua,$mobile_agents)) {
    $mobile_browser++;
 }
 if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {
    $mobile_browser++;
 }
 if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {
    $mobile_browser = 0;
 }
 if ($mobile_browser > 0) {
   // do something
 }
 else {
   // do something else
 }   
 
 ?>

^[28] ^[29]