Design For Mobile Web

这两天专门制作了一个手机页面,现在分享一下里面常用的一些技巧。

通过viewport来匹配设备宽度

网上常见的做法:

上面这段代码,源自Google的Best Practices for Web Apps,但在实际使用过程中,并不能完全适应iOS、Android平台,至于WP,我的注意力暂时还没在它身上。

今天终于找个一个兼容Android和iOS的方法了。

这样,设计Mobile Web页面的时候,只需要按照640px的宽度进行设计就可以了。测试结果是Android 2.2+自带浏览器、iOS5+自带浏览器、Chrome移动版、Firebox移动版和UC8+以上版本皆能完美自适应。

PS:

  • 刚才搜索了一下viewport这个概念博大高深,里面还涉及到dpi等,我这里只是一种偷懒的方法。
  • viewport和响应式设计理念不同,响应式设计是一套html结构适配全平台,而viewport仅仅是给移动平台使用,并不打算兼容PC平台,如需兼容PC浏览器,需要另外写判断。

iOS中的WebApp

html5有多强大?看看之前Facebook在iOS上面的客户端就知道。

这里贴一些制作WebApp可能会需要用到的代码。

例如最常见的,隐藏导航栏,隐藏菜单栏等,不过这类效果,必须要用户把Web添加到主屏幕上,并且通过主屏幕上面的图标进入才生效。

同时,如果从WebApp中跳到了外部的浏览器或者其他软件,想再次返回到WebApp的时候,必须重新打开,不能够保存上次的访问结果。估计这事应该有解决方法。

导航了太占位了,如何在浏览器中就隐藏掉呢

就这么简单,当页面加载成功的时候,页面自动向上滚动,导航了就看不到了,第一页的高度就多了50px。

下面的菜单栏也很占位,如何隐藏?

404,这个,还真没找到方法…