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

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

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

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

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

比如说，我有一个这样的页面：

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

这时候，通常的做法是用这样的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上达到了我们想要的效果：

难搞的H5

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

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

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

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

关于界面的随想

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