手机网站开发的经验总结

时间 2019-11-13

原文原文链接

手机版网站起码要实现一些基本的功能吧：

1.页面的适用性问题。对于移动终端，有不同的分辨率与屏幕尺寸，若是还像电脑端的设计还限制网页的宽度为1003px或其余像素值，字体大小还用12px或14px，那么，不同的终端的效果差异会很大。因此这里，最好让网页的宽度自适应屏幕，还好，w3c在设计html的时候为咱们考虑了这一点，只需一句话，就能够搞定，就是加上

<meta name="viewport" content="width=device-width"/>

,对于字体的话，咱们就用em或ex为单位就好

2.版本制做问题。移动页面每每针对不一样的手机设置不一样的版本，通常有精简版，标准版，3G版，触屏版，智能手机版等等，这些除了在页面设计上有不一样外，页面语言也会不一样的。精简版采用wap 1.0 的wml脚本编写，这个通用性之前很强，不少国产手机都支持这个语言的，但这个语言是很精简的。标准版的通常能够采用wap 2.0技术，对应的脚本语言是xhtml mp(xhtml mobile profile)，这个语言是xhtml的子集，这个而且支持大部分的css,基本上和电脑版的差很少，但通常不能用js，这是考虑到这些手机是不支持js的。对于智能手机版，因为如今的智能手机都支持js，这个版本的制做上就简单多了，不过，又因为大部分智能手机（基本上除去塞班手机，包括Android,ios,wp7等）都支持Html5，所以，智能手版能够采用html5来制做。

3.版本控制问题。可能这部分是比较很差解决的，怎么智能判断手机的最佳版本并跳转，能够从这几个方面考虑。一方面，能够想办法获得手机的操做系统，好比，Android的，ios的，就能够跳转到html5版了，windows系统，毫无疑问电脑版，得到手机系统，可能经过获得手机型号，如今的方法是经过浏览器的UA（user agent)，得到手机的一些信息，简单一点的，直接能够经过UA判断手机的制造产商。要想得到更多的信息，就得有一个数据库，由于不一样手机型号会有不同的UA信息，世界上的手机有不少，本身要想作一个这样的数据库仍是很难的，不过，已经有人为咱们作好了这样的数据库，或者更方便的，作好了一个识别手机适用最佳版本的函数库，这里我推荐用Wurfl。另外一方面，能够经过页面的脚原本判断浏览器对js和html5的支持，代码以下

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<title>版本控制</title>
<script type="text/javascript">
window.onload = function(){
  //检测是否支持js
  try{//检测是否支持html5
    document.getElementById("c").getContext("2d");
    document.location = '支持html5版的连接';
  }catch(e){//不然跳到支持js版
    document.location = '支持js版';
  }
};
</script>
</head>

<body>
<canvas id='c'></canvas>
普通版
</body>
</html>

若是你仅仅想开发一个版本，只是判断一下是否是移动客户端，这里引用一段discuz! x2的代码

<?php
function checkmobile() {
	global $_G;
	$mobile = array();
	static $mobilebrowser_list =array('iphone', 'android', 'phone', 'mobile', 'wap', 'netfront', 'java', 'opera mobi', 'opera mini',
				'ucweb', 'windows ce', 'symbian', 'series', 'webos', 'sony', 'blackberry', 'dopod', 'nokia', 'samsung',
				'palmsource', 'xda', 'pieplus', 'meizu', 'midp', 'cldc', 'motorola', 'foma', 'docomo', 'up.browser',
				'up.link', 'blazer', 'helio', 'hosin', 'huawei', 'novarra', 'coolpad', 'webos', 'techfaith', 'palmsource',
				'alcatel', 'amoi', 'ktouch', 'nexian', 'ericsson', 'philips', 'sagem', 'wellcom', 'bunjalloo', 'maui', 'smartphone',
				'iemobile', 'spice', 'bird', 'zte-', 'longcos', 'pantech', 'gionee', 'portalmmm', 'jig browser', 'hiptop',
				'benq', 'haier', '^lct', '320x320', '240x320', '176x220');
	$useragent = strtolower($_SERVER['HTTP_USER_AGENT']);
	if(($v = dstrpos($useragent, $mobilebrowser_list, true))) {
		$_G['mobile'] = $v;
		return true;
	}
	$brower = array('mozilla', 'chrome', 'safari', 'opera', 'm3gate', 'winwap', 'openwave', 'myop');
	if(dstrpos($useragent, $brower)) return false;

	$_G['mobile'] = 'unknown';
	if($_GET['mobile'] === 'yes') {
		return true;
	} else {
		return false;
	}
}

function dstrpos($string, &$arr, $returnvalue = false) {
	if(empty($string)) return false;
	foreach((array)$arr as $v) {
		if(strpos($string, $v) !== false) {
			$return = $returnvalue ? $v : true;
			return $return;
		}
	}
	return false;
}
var_dump(checkmobile());//若是是移动端返回true，不然false

4.手机版本的大小问题。通常来讲，对于精简版和普通版的手机网页，咱们是作得越精简越好，能省的代码最好省去，毕竟如今手机流量对用户来讲仍是很宝贵的。好比元素命名，通常页面少的话，命名越短越好，css最好写在一行。css中，有些元素是继承父类的样式的，不用重复定义，善用默认值。

5.浏览器缓存。若是再更新不快的状况下，最好开启浏览器缓存