Making a site mobile friendly

Question

Is there a way to make it so when a site is viewed with a phone or other small mobile device the site automatically recognizes that it is being viewed as such and either re-directs to a phone friendly subdomain mirror or automatically calls a script that makes it phone friendly?

Any articles or advice would be greatly appreciated!

Answer 1

The user-agent in the HTTP request can help detect the browser. You can then redirect to the subdomain when the page is viewed from specific browsers.

Otherwise, the media CSS selector can be used as well to adapt the layout to the kind of device. There is media type handheld, but I don't know how well it is supported.

Answer 2

Use multiple CSS.

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

Answer 3

Well, certainly you can use JavaScript code to check what kind of browsers that the users run, and respond appropiately to that. For example :

var browser = navigator.appName;

if (browser == 'Mozilla Firefox') {
 // do something
} else if (browser == 'Some Weird Browser') {
 // do something else
}

Reference : http://www.w3schools.com/js/js_browser.asp

Answer 4

There are several methods that can help you detect mobile browsers. Here's some sample PHP code:

function isMobileBrowser() {

  if(isset($_SERVER["HTTP_X_WAP_PROFILE"])) return true;

    if(preg_match("/wap\.|\.wap/i",$_SERVER["HTTP_ACCEPT"])) return true;

    if(isset($_SERVER["HTTP_USER_AGENT"])){

      // Quick Array to kill out matches in the user agent
      // that might cause false positives

      $badmatches = array("OfficeLiveConnector","MSIE\ 8\.0","OptimizedIE8","MSN\ Optimized","Creative\ AutoUpdate","Swapper");

      foreach($badmatches as $badstring){
        if(preg_match("/".$badstring."/i",$_SERVER["HTTP_USER_AGENT"])) return false;
      }

      // Now we'll go for positive matches

      $uamatches = array("midp", "j2me", "avantg", "docomo", "novarra", "palmos", "palmsource", "240x320", "opwv", "chtml", "pda", "windows\ ce", "mmp\/", "blackberry", "mib\/", "symbian", "wireless", "nokia", "hand", "mobi", "phone", "cdm", "up\.b", "audio", "SIE\-", "SEC\-", "samsung", "HTC", "mot\-", "mitsu", "sagem", "sony", "alcatel", "lg", "erics", "vx", "NEC", "philips", "mmm", "xx", "panasonic", "sharp", "wap", "sch", "rover", "pocket", "benq", "java", "pt", "pg", "vox", "amoi", "bird", "compal", "kg", "voda",     "sany", "kdd", "dbt", "sendo", "sgh", "gradi", "jb", "\d\d\di", "moto","webos");

      foreach($uamatches as $uastring){
        if(preg_match("/".$uastring."/i",$_SERVER["HTTP_USER_AGENT"])) return true;
      }

    }
    return false;
} 

Source: http://www.brainhandles.com/techno-thoughts/detecting-mobile-browsers