• 关于手机网站开发的一些总结
    时间:2012-03-01   作者:王斌_code   出处:iteye.com

    由于硬件、系统、网络等等限制,手机网站不同于普通网站开发,本文列举一下手机网站开发的总结。

    手机版网站起码要实现一些基本的功能吧:
    1.页面的适用性问题。对于移动终端,有不一样的分辨率与屏幕尺寸,如果还像电脑端的设计还限制网页的宽度为1003px或其他像素值,字体大小还用12px或14px,那么,不一样的终端的效果差别会很大。所以这里,最好让网页的宽度自适应屏幕,还好,w3c在设计html的时候为我们考虑了这一点,只需一句话,就可以搞定,就是加上
    Javascript代码  收藏代码

        <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的支持,代码如下
    Javascript代码  收藏代码

        <?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代码  收藏代码

        <?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.浏览器缓存。如果再更新不快的情况下,最好开启浏览器缓存

    网友留言/评论

    我要留言/评论

    相关文章

    10款帮助你设计超酷响应式布局的jQuery插件:如果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇。 相对于传统的页面设计来说,今天的设计者需要考虑的用户来源和用户体验对于设计者来说是一个非常大的挑战,因为随着硬件的更新,新设备的出现,你需要能够 使得你的网站能够针对不同的设置做出最好显示响应。最初这个名称来自于Ethan Marcotte的文章“Responsive Web Design”,设计的理念在于为了有效的利用空间和布局来满足用户阅读过程中产生的不同使用行为,并且及时的做出响应。现在的响应式设计中,我们网站也针对不同的设备的显示尺寸来有效的改变页面布局和样式。如果大家使用过jQuery mobile网站API文档的话,你可以看到它也是用了响应式设计的模式,如果你使用浏览器浏览文档,如果你变化你的浏览器尺寸,显示的内容也会根据浏览器尺寸变化。
    25 个精美的后台管理界面模板和布局:任何系统都会有一个管理后台,好看的管理后台看起来赏心悦目,管理的时候心情也舒畅,本文给大家推荐 25 个制作精美的后台管理界面的模板和布局,你值得拥有。
    提升移动Web性能表现的四个建议 - Google官方开发指南:移动浏览器上的页面布局与桌面浏览器有着显著的差异,所以,想要在移动设备上开发出优秀的浏览器,有些注意事项是需要开发者事先了解的。对于如何在移动设备上开发出高性能、体验良好的web应用,Google网络管理员Jeremy Weinstein给出了几点技术和非技术方面的建议。
    2012年最新的25个精彩的WordPress主题下载:WordPress作为功能极其强大的博客系统,已经成为主流 blog的搭建平台,他们拥有世界上最强大的插件和模板。国外某网站分享了2012年最受欢迎的25个WordPress模板,包括个人博客,摄影网站以及企业社区等主题,其中是否有你喜欢的。
    HTML5: 10 个顶级使用 CSS3 动画的网页:目前已经有很多的开发者开始使用 CSS3 和 HTML5 技术来开发各种应用,下面是我们列出了 10 个惊艳的使用 CSS3 动画的网页,望对大家有所帮助。
    网站建设前期分析、功能定位和技术方案:网站建设前期分析、功能定位和技术方案
    IOS开发者创建应用前需要知道的8件事:苹果移动应用商店的魅力显而易见,很多开发者已经冲在前面,并早已发布自己的移动应用。作为只有创意却不会编程、不懂设计的普通人,如果想要开发自己的iOS应用,需要先了解些什么呢?流行iOS应用Cloth的创建与维护者Seth Porges,结合自己的一些经历,给出如下观点。
    防止浏览器假死的方法 - HTML 5 Web开发:在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出“脚本运行时间过长“的提示框,如果出现这种情况说明你的脚本已经失控了。针对这种情况如何控制?请看下文。
    网站首页12大元素:网站首页需要身兼数职,提供给来自不同地方的观众们使用。它不像一个专用的登陆页面——来自不同通道的流量会显示各自特定的信息,并执行相对应的指令。登陆页面有更高的转换率,因为它是有针对性的,是对来访者最重要的一部分。
    照片共享 Flickr 网站架构分析:Flickr.com 是网上最受欢迎的照片共享网站之一,还记得那位给Windows Vista拍摄壁纸的Hamad Darwish吗?他就是将照片上传到Flickr,后而被微软看中成为Vista壁纸御用摄影师。