手机网站开发的一些小结
手机网站开发的一些总结手机版网站起码要实现一些基本的功能吧:1.页面的适用性问题。对于移动终端,有不一样
手机网站开发的一些总结
手机版网站起码要实现一些基本的功能吧:
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>
4.手机版本的大小问题。一般来说,对于精简版和普通版的手机网页,我们是做得越精简越好,能省的代码最好省去,毕竟现在手机流量对用户来说还是很宝贵的。比如元素命名,一般页面少的话,命名越短越好,css最好写在一行。css中,有些元素是继承父类的样式的,不用重复定义,善用默认值。
5.浏览器缓存。如果再更新不快的情况下,最好开启浏览器缓存 挺简洁实用的。