人心不足蛇吞象,做网站做到一大半时看到了人人网的手机版广告,上去看了一下,也想在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到一边去。看起来就稍微美了。
- 描述: 手机版登录界面
- 大小: 29.5 KB
分享到:
- 2009-11-11 22:39
- 浏览 683
- 评论(1)
- 论坛回复 / 浏览 (1 / 2280)
- 查看更多
相关推荐
grails 开发指南第二版 Who is this book for? This book is for everyone who is looking for a more agile approach to web development with a dynamic scripting language such as Groovy. This includes a ...
详细讲解grails开发环境配置。 详细讲解grails连接mysql数据库,crud开发
Apress.Beginning.Groovy.and.Grails.From.Novice.to.Professional.Jun.2008 grails_programming Grails1.1中文文档-----2009.3.25 Grails入门指南(第二版) Groovy经典入门 Programming Groovy 2 合集,超实惠哦
Grails_开发简介,本文介绍如何使用Oracle JDeveloper 作为IDE 来开发Grails 应用程序。此外,您还在学习开发Grails 应用程序的过程中大概了解Groovy 的一些概念。
grails1.0开发框架1 类似于ruby on rails的框架。
grails1.0开发框架4 类似于ruby on rails的框架。
Grails权威指南第二版 Grails是一个搭建在动态语言 Groovy 之上的开源 MVC 快速 Web 开发框架。使用 Grails 可以提高 Web 开发的效率,降低 Web 开发的复杂度。 本书由Grails项目负责人Graeme Keith Rocher编写,极...
Grails从入门指南(第二版)
最新的grails学习资料 新手必备 分享
grails开发关于grails入门指南的例子进行分析
grails1.0开发框架5 类似于ruby on rails的框架。
grails 中文第二版
关于Grails开发的软件部署建议
grails快速开发web.pdf
grails1.0开发框架3 类似于ruby on rails的框架。
Grails开发之(Rest教程).pdf
Grails开发之(Rest教程).docx
grails开发实践,欢迎下载使用 grails开发实践,欢迎下载使用 grails开发实践,欢迎下载使用
Grails 开发手册1
Grails开发Web应用的入门建立兴趣的最佳教程。