Making a site mobile friendly
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 arti开发者_StackOverflow中文版cles or advice would be greatly appreciated!
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.
Use multiple CSS.
<link href="/css/mobile.css" rel="stylesheet" type="text/css" media="handheld" />
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
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
精彩评论