手机web站制作中的问题和思考

近期做了公司手机版网站的改版工作,在做的过程尝试了些东西,也遇到了问题,更给了我很多的感悟。

第一版的wap站是参考了别人的,基本上没有自己的思考,所以这次对我来说收获很大。

给上wap的样子。

uniwigs-wap

 

 

在做wap站的过程,一直想把它做成wapApp的形式,所以找了两个插件框架,但是尝试了后还是不怎么好,说下使用中的遇到的问题

iScroll5
1.使用中会经常出现头部消失的问题,没找到解决方法,
2.使用iScroll5后,链接点不了的问题,可以这样写,与iSroll4的解决方法不一样。
var myScroll;
function loaded () {
myScroll = new IScroll(‘#wrapper’, { click: true });
};

3.使用滑到底部,还会继续滑,内容会溢出,导致这个问题的方法没解决。
4.iScroll在iPhone中滚动很流畅,但在Android中表现的不怎么流畅。
这做uniwigs手机站的过程中,因为iSroll的这些问题,放弃了使用,因为现在的Android和ios已经很好的支持position: fixed;属性,只在2+版本的Android原生浏览器上会出现
闪烁现象。
Snap
屏幕左右边缘的滑动开拓导航。这个效果使用中没问题,用起来很流畅,然而Chrome会使用这个操作来切换选项卡,新版本的iOS7的Safari浏览器却会使用它来历史前进和后退。这个使它用起来没那么必要了
如果不用手势滑动导航,就可以去掉这个插件,直接使用css3动画属性来写
-webkit-transition: z-index 0s linear .2s;
wap站在一些方面优化后仍然可以类似app的使用顺畅感,下面说下优化的几点:
1. 给你的按钮增加触摸状态

要使你的站点感觉快,就要让你的按钮能够及时响应用户的点击事件,并且在状态改变时给用户一个可见的反馈。

有一个非常好用的CSS伪类叫做 active 状态,它可以用来在网页上显示一个按钮或者链接被点击了。我们也可以同时把它使用在PC端浏览器上。

不幸的是,无论是iOS还是Android上的链接或者按钮被点击的时候都会忽略这个属性。为了使用这个active状态,你需要使用JavaScript给页面添加一个简单的事件:

1
document.addEventListener("touchstart", function(){}, true)

这样,你就可以使用CSS来给按钮添加active状态或者移除点击高亮的状态了:

1
-Webkit-tap-highlight-color: rgba(0,0,0,0);

给你创建的按钮添加了这些属性和active状态之后,用户就可以立即感觉到页面的反馈,即使实际上真实的反馈速度并没有改变。你只是让用户针对自己的行为得到了一个及时的反馈,而不是让他们等待300毫秒后才看到页面响应。

 

2. 使用默认滚动

你曾经是否尝试在自己的站点上创建一个可滚动的容器,或者被一个运行起来非常慢,并且没有任何响应的滚动条困住?

Android 3+ 和iOS 5+ 都实现了一个新的名叫overflow-scroll的属性,用来开启原生的滚动条,它运行起来非常完美。

这个滚动条使用起来就像是使用本地程序的感觉,实际上它就是原生的,你需要做的只是给你的滚动容器添加这个属性:

1
-Webkit-overflow-scrolling: touch;

然而,关于这个属性还存在一个问题,那就是当滚动到页面最顶部的时候会禁止你的iphone显示状态栏。这个BUG已经存在有段时间了,即使是最新版本iOS7上的移动版Safari都没有解决这个问题。

解决这个问题的方法之一是:创建一个类来给容器添加 overflow-scrolling:touch属性。然后只有当容器处于可见状态 时,使用JavaScript去应用这个类,使其生效。

在Android 4上你不需要这个属性,因为每个可滚动的容器都包含了原生滚动条。

 

wap站不要盲目的追求APP的效果,应该更注重兼容与加载速度以及使用体验上来。很多网站都放弃了wap站的更新维护,积极的推广APP应用,这就是APP对用户而言有更好的体验

 

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注