iOS7.0的童鞋在用Safari浏览网页时,都知道是这种效果:

11

滑动页面的时候,底部和顶部的状态栏会自动隐藏弱化,这个体验其实挺人性化的,但fifi觉得可能某些时候会觉得不方便,因为假如我常常要回顾上面看过的文字内容,就要滑动回去,滑动的时候底部和顶部的状态栏就会显示出来,无形中占据了不少的窗口位置。

始终强调人性化设计的苹果当然注意到了这点,于是在 iOS 7.1 的 Safari 中为 meta 标签新增 minimal-ui 属性,让网页在加载时便可直接隐藏顶部的地址栏与底部的导航栏。

如何实现?你只需将“minimal-ui”加入 viewport meta 标签的属性中,比如:

<meta name="viewport" content="minimal-ui">

这样的话,打开icefifi.com网页后就是这种效果了:

22

此时需要点击顶栏部分便能显示地址栏与导航栏,再点击页面部分又使之隐藏。

总之苹果给出了这个方法让你去选择,开发人员可考虑网站针对的用户对象或者自己网站展现的需求来选择是否加入这个效果。

在手机 Safari 上打开 icefifi.com 就可以看到demo了!