Grails开发随笔系列(二)抛砖引玉,手机版界面解决方案

人心不足蛇吞象,做网站做到一大半时看到了人人网的手机版广告,上去看了一下,也想在goal98 team manager上弄个手机版玩玩。这样球队管理员可以第一时间把球队帐户明细显示给成员们,大家清清楚楚嘛~~~

 

搜索了一下关于给手机浏览器做网页的经验之谈。决定页面采取xhtml mobile profile的格式。这样普通电脑浏览器也可以浏览。grails默认的sitemesh layout是main,我增加一个专门给手机版用的mobile layout。

 

 

页面头应该是这样的:

 

 

<?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">

 

 

由于本人比较懒,很多地方都没有完全遵照规范,如果把http://team.goal98.com/m/login/auth页面拿去http://validator.w3.org/验证的话,错误一大堆。不过还是能正常显示啦。

 

由于是给手机用的layout,css也是专用的,本人无耻地从renren扒了些css来。鄙视我吧。如果设计得好的话,同一界面的不同版本应该这样做

 

普通浏览器版:

 

<head>
  <meta name='layout' content='main'/>
  <title><g:message code="login.title" default="Team Manager Login"/></title>

</head>

<body>
  <g:render template="/login/auth"/>
</body>

 

 手机浏览器版:

 

 

<head>
  <meta name='layout' content='mobile'/>
  <title><g:message code="login.title" default="Team Manager Login"/></title>

</head>

<body>
  <g:render template="/login/auth"/>
</body>

 

 

/login/_auth.gsp里面的页面元素应该能在两套css下都能显示正常。不过本人没做到这么干净,好多地方为了在手机界面减少显示元素还是用了不同的界面,没有都公用template。

 

做手机版重要的一步是把用户引导到手机版上。人人网的做法是直接用了不同的域,http://m.renren.com/

我用了个比较垃圾的做法,就是在登录界面url用http://team.goal98.com/m/login/auth加一个m。在urlmapping中

加了个规则:

 

        "/m/$controller/$action?/$id?" {
            mobile = true
            constraints {
                // apply constraints here
            }
        }

 

 等于是加了个mobile的parameter在请求里,然后在一个filter里把session打上标记。

 

 

def filters = {
        all(controller:'*', action:'*') {
            before = {
                if(params.mobile){
                    session.mobile = true
                }
                
            }
            after = {
                
            }
            afterView = {
                
            }
        }
    }

 

 之后跟手机版页面有关的controller显示页面时回去判断这个标记

 

 

if(session.mobile)
            view = "m-"+"$view"

        render view: view, model: [postUrl: postUrl]

总之非常之垃圾。希望能得到大家的建议。 

至于手机版的页面设计,就是遵循少图片,小容量的原则。内容都给我float到一边去。看起来就稍微美了。


Grails开发随笔系列(二)抛砖引玉,手机版界面解决方案

你可能感兴趣的:(css,浏览器,XHTML,mobile,grails)