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