手机网站开发的一些总结

手机版网站起码要实现一些基本的功能吧： 
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.浏览器缓存。如果再更新不快的情况下，最好开启浏览器缓存