mobile站点ui构架

首先来了解下Safari的缓存特性
1. 每个静态资源(*.html, *.js, *.css) < 10M
2. 超过25K的静态资源不会被缓存 (gzip前)

head部分（不做过多的解释）

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon-precomposed" href="logo-icon.png">
<link rel="shortcut icon" href="/favicon.ico">
<!-- uc浏览器全屏 -->
<meta name="full-screen" content="yes">

js库推荐
1. zepto.js 24k 语法和jquery一样
2. iscroll.js 20k http://cubiq.org/ 该网站有好几个很好用的库

iscroll是在仿手机QQ空间时发现的，手机QQ空间基本可以算是一个wabapp啦！
网站上有它的示例可以参看下，具体效果可以参看手机QQ空间触屏版，这个东西非常强大！
可以参看下它的源码里的一些方法，比如myScroll.scrollTo(0, 0, 300);就可以达到返回顶部的效果

比一般的#top 和淘宝的：javascript:scroll(0,0); 要好的多！

关于cache.manifest离线缓存（详情请百度一下）

手机淘宝首页：

<html manifest="/manifest/indexAppCache.manifest">

淘宝的其他页面并没有使用离线缓存，可能是为了避免下面的这个问题！
离线缓存有个不好的地方就是他会默认缓存本页，即使手机关掉网络也能访问！
这下悲剧了，动态页面的参数无法刷新！

NETWORK:
*

也不好使！

曾经遇到这个问题在网站找到了这个问题的解决办法，不好意思忘记原网址了！
将cache.manifest写在cache.html在需要离线缓存的页面以iframe引用，完美解决！

cache.html：

<!DOCTYPE html> 
<html manifest="cache.manifest"> 
<head>
        <meta charset=utf-8 />
        <title>cache</title>
</head>
<body>
hi sofish!
</body>
</html>

<iframe src="cache.html"></iframe>
iframe {
    display: none;
}

网站的流量得到控制了，可以提醒用户我们的触屏版比3g版更省流量了，将带有android和ios的ua直接导到我们的触屏版！

技巧：

在手机QQ空间中有大量的类似 data-struct="page" 来绑定数据

<section class="body-box-wrap" id="home" data-struct="tab" data-init="showMiniFeeds" selected="true" style="height: 761px; overflow: hidden; " ontouchmove="event.preventDefault();">

其实这个可以用zepto||jquery中的来存取值！

$(selector).data(name)；
$(selector).data(name,value)；

以前一直没用过，发现这个其实灰常的好用，推荐下！

本人比较懒，一直想写些东西，却又发现写的不咋的，靠！
仿照手机QQ空间的这个项目由采用的是rails构架，本人java开始比较抵触就写ui了！
个人觉得iscroll.js非常的优秀！有空将这个项目搭个jfinal的开源，敬请期待吧！

posted on 2012-09-28 13:13 孤独的程序猿阅读(408) 评论(0) 收藏举报

刷新页面返回顶部

孤独的程序猿

mobile站点ui构架

导航

公告