Design cross devices web sites

最新推荐文章于 2025-08-05 16:41:44 发布

原创最新推荐文章于 2025-08-05 16:41:44 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript_CSS 专栏收录该内容

36 篇文章

订阅专栏

本文概述了如何使用JavaScript检测设备类型，并介绍了设备检测的方法和响应式网页设计的概念。主要内容包括设备检测策略、创建针对不同设备的网站、以及如何在单一网站中适应多种设备。此外，还详细阐述了响应式设计的重要性及其工作原理。

The devices are still on the rise and our web sites have to be compatible with all of devices like desktop, mobile, ipad ,pda and etc. I will make some summary of hints and tips used by some popular sites.

Device Detection:

1.Use JavaScript to detect the devices and create one site for each device:

function fCheckBrowser(){
	gbForcepc = fGetQuery("dv") == "pc";
	if(!gbForcepc){
		var sUserAgent = navigator.userAgent.toLowerCase();
		var sUrlRedirect;
		var oUrlRedirect = {
			"ipad" : "http://ipad.mail." + gOption["sDomain"] + "/?dv=ipad",
			"pad"	: "http://pad.mail." + gOption["sDomain"] + "/",
			"smart" : "http://smart.mail." + gOption["sDomain"] + "/?dv=smart",
			"m" : "http://m.mail." + gOption["sDomain"] + "/"
		};
		var aClient = ["ipad","iphone os","android","ucweb","rv:1.2.3.4","windows ce","windows mobile","midp"];
		for(var i=0;i<aClient.length;i++){
			if(sUserAgent.indexOf(aClient[i]) != -1){
				switch(aClient[i]){
					case "ipad" : 
						sUrlRedirect = oUrlRedirect["ipad"];
						break;
					case "iphone os" :
						sUrlRedirect = oUrlRedirect["smart"];
						break;
					case "android" :
						if(!oUrlRedirect["smart"]){
							oUrlRedirect["smart"] = 'http://email.163.com/?dv=pc';
						}
						if(!oUrlRedirect["pad"]){
							oUrlRedirect["pad"] = 'http://email.163.com/?dv=pc';
						}
						oAndroidRedirect = {
							sPhoneUrl	:	oUrlRedirect["smart"],
							sPadUrl		:	oUrlRedirect["pad"]
						};
						top.location.href = 'http://mail.163.com/html/android_device/v1.htm?smart=' + encodeURIComponent(oAndroidRedirect.sPhoneUrl) + '&pad=' + encodeURIComponent(oAndroidRedirect.sPadUrl);
						return false;
						break;
					default :
						sUrlRedirect = oUrlRedirect["m"];
				}
			window.location.href = sUrlRedirect;
			}
		}
	}
}

2.Use HTTP request agent parameters and create different themes and adapation within one site

function lite_detection_ua_contains() {
  return implode("|", array(
    'android',
    'blackberry',
    'hiptop',
    'ipod',
    'lge vx',
    'midp',
    'maemo',
    'mmp',
    'netfront',
    'nintendo DS',
    'novarra',
    'openweb',
    'opera mobi',
    'opera mini',
    'palm',
    'psp',
    'phone',
    'smartphone',
    'symbian',
    'up.browser',
    'up.link',
    'wap',
    'windows ce',
  ));
}

3.Responsive Design

Responsive web design is the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform and orientation.The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

We can get the introduction here : http://en.wikipedia.org/wiki/Responsive_Web_Design