关于iPhone的Safari浏览器中 单页应用会来回滚动的问题
界面设计

Category Archives:界面设计

关于iPhone的Safari浏览器中 单页应用会来回滚动的问题


这篇文章记录一下工作中解决的一个CSS问题。

正常情况下,网页的内容超出了窗口大小后,浏览器是可以让用户滚动的。

现代的手机浏览器也可以在网页内容很大时,允许用户进行拖拽和缩放。

但有的时候,我们设计了一个单页面网页应用,我们希望这个页面仅仅保持浏览器窗口的大小,而不允许用户上下左右地滑动。

比如说,我有一个这样的页面:

01

它后面的背景是一张比窗口要大得多的图片,如果我们不做样式限定,那么很可能用户来回拖拽一下就会让网页四处漂移,就像下面这样:

02

这时候,通常的做法是用这样的CSS写法:

body,html {
    width: 100%;
    height: 100%;
    background-image: url(images/background.jpg);
    background-size: cover;
    overflow: hidden;
}

原本以为添加了overflow:hidden这个属性,就可以达到效果,但是在iPhone的Safari浏览器中,还是会出现这种情况:

解决方法是,添加一行position: fixed,如下:

body,html {
    position : fixed;
    width: 100%;
    height: 100%;
    background-image: url(images/background.jpg);
    background-size: cover;
    overflow: hidden;
}

这样,就在iPhone上达到了我们想要的效果:
03

难搞的H5


上周接手了人力资源的一个面向内部的年度账单设计任务,同样是H5。
经过一周五天数次改稿、程序员们周末两天加班的辛苦工作,该活动终于上线。但是花了一个星期做出来的东西,那个效果真的是惨不忍睹。

由于保密原因,界面我不能放出来。

用H5来表现数据,尤其是跟个人有关的数据,从设计角度实在是很难做。即使把某一个特定的数据做的很好看,也不能保证大家每个人的数据看起来都不错。极端的数据为空、数据过大等情况需要考虑,屏幕适配性也需要考虑,数据的载入速度也需要考虑。

得记住这些坑,下一次别被业务牵着鼻子走了。

关于界面的随想


那些看起来酷炫的、充满形式感的、抓人眼球的界面设计,不一定不好,但一定不是可以让用户时常使用的界面。
人们喜欢喝酒、喜欢喝各种饮料,但是喝的最多的一定是白水。产品界面也是这样,酷炫的东西,拿来做品牌的官网和宣传手册没问题,但是要想让用户在互动的时候尽量少些麻烦,就别搞太多花哨。

文章归档