手机网站开发的一些总结
来源:互联网 发布:net com top ltd 域名 编辑:程序博客网 时间:2024/05/07 01:16
手机版网站起码要实现一些基本的功能吧:
1.页面的适用性问题。对于移动终端,有不一样的分辨率与屏幕尺寸,如果还像电脑端的设计还限制网页的宽度为1003px或其他像素值,字体大小还用12px或14px,那么,不一样的终端的效果差别会很大。所以这里,最好让网页的宽度自适应屏幕,还好,w3c在设计html的时候为我们考虑了这一点,只需一句话,就可以搞定,就是加上,对于字体的话,我们就用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的支持,代码如下
如果你仅仅想开发一个版本,只是判断一下是不是移动客户端,这里引用一段discuz! x2的代码
4.手机版本的大小问题。一般来说,对于精简版和普通版的手机网页,我们是做得越精简越好,能省的代码最好省去,毕竟现在手机流量对用户来说还是很宝贵的。比如元素命名,一般页面少的话,命名越短越好,css最好写在一行。css中,有些元素是继承父类的样式的,不用重复定义,善用默认值。
5.浏览器缓存。如果再更新不快的情况下,最好开启浏览器缓存
1.页面的适用性问题。对于移动终端,有不一样的分辨率与屏幕尺寸,如果还像电脑端的设计还限制网页的宽度为1003px或其他像素值,字体大小还用12px或14px,那么,不一样的终端的效果差别会很大。所以这里,最好让网页的宽度自适应屏幕,还好,w3c在设计html的时候为我们考虑了这一点,只需一句话,就可以搞定,就是加上
- <meta name="viewport" content="width=device-width"/>
在网页中加入以下代码,就可以正常显示了:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
解释:
width – viewport的宽度
height – viewport的高度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放精简点的话,可以把上面的代码更改为以下代码,效果是一样的:
<meta content="width=device-width,user-scalable=no" name="viewport">
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(emptyempty($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.浏览器缓存。如果再更新不快的情况下,最好开启浏览器缓存
0 0
- 手机网站开发的一些总结
- 手机网站开发的一些总结
- 手机网站开发的一些总结
- 手机网站的开发
- 手机网站开发总结版(zz)
- 手机网站开发必修课[2009总结版]
- 手机网站开发必修课【2009总结】
- 手机网站开发必修课[2009总结版]
- 手机安全卫士的一些总结
- 手机网站开发必修课[3]:前端开发总结
- 手机网站开发必修课[3]:前端开发总结
- 网站开发的一些见解
- opengl开发的一些网站
- 开发相关的一些网站
- 前端开发的一些网站
- 手机流媒体开发的总结
- 关于“手机”一些术语的小总结
- WAP2.0手机网站的开发
- linux系统cut命令使用
- Android之Matrix用法
- C# 计时器
- hdu1465 不容易系列之一(错排)
- 字符串匹配之KMP---全力解析
- 手机网站开发的一些总结
- 今年200亿元将投资用于推动IPv6的发展 加快IPv6商用化进程
- C++实验指导
- 程序开发最常用的10大算法
- SITU智能电子称:告诉你食物卡路里及营养成分
- 东芝发布全球最快microSD存储卡 64GB版读取速度高达260MB/s
- 某网络管线资源管理系统支撑平台简述
- 优先队列 水题
- 小技巧:让VS2010打开VS2012工程