(这是一个多部分的问题,我将尽力总结这个场景.)
我们目前正在构建一个响应式Web应用程序(新闻阅读器),允许用户在选项卡式内容之间滑动,以及在每个选项卡式内容中垂直滚动.
解决此问题的常见方法是使用一个包装器div填充浏览器视口,设置overflow为hidden或auto,然后在其中水平和/或垂直滚动.
这种方法很好,但有一个主要缺点:由于文档的高度与浏览器视口完全相同,因此移动浏览器不会隐藏地址栏/导航菜单.
有许多hacks和视口属性使我们能够获得更多的屏幕空间,但没有一个像minimal-ui(在iOS 7.1中引入)那样有效.
昨天有消息称iOS 8 beta4已从minimal-uiMobile Safari中删除(参见iOS 8发行说明中的 Webkit部分),这让我们感到奇怪:
Q1.是否仍然可以隐藏Mobile Safari上的地址栏？
据我们所知,iOS的7 不再响应的window.scrollTo破解,这意味着我们不得不忍受较小的屏幕空间,除非我们采取垂直布局或使用mobile-web-app-capable.
Q2.是否仍然可以获得类似的软全屏体验？
通过软全屏我真的意味着不使用mobile-web-app-capable元标记.
我们的Web应用程序可以访问,任何页面都可以使用本机浏览器菜单加入书签或共享.通过添加mobile-web-app-capable我们阻止用户调用这样的菜单(当它保存到主屏幕时),这会混淆和对抗用户.
minimal-ui曾经是中间地带,默认隐藏菜单但是通过点击可以访问它 - 虽然Apple可能已经删除它由于其他可访问性问题(例如用户不知道点击激活菜单的位置).
Q3.全屏体验值得一试吗？
似乎全屏API不会很快进入iOS,但即便如此,我也看不到菜单是如何保持可访问的(Android上的Chrome也是如此).
在这种情况下,也许我们应该保持原样的移动游猎,并考虑视口高度(对于iPhone 5 +,它是460 = 568 - 108,其中108包括操作系统栏,地址栏和导航菜单;对于iPhone 4或年纪大了,它是372).
很想听到一些替代方案(除了构建本机应用程序).
我想在webapp中禁用iOS过度滚动但仍然允许滚动主体.
$(document).on('touchmove', function(e) {
e.preventDefault();
});
完全禁用滚动(正如人们所期望的那样).
有办法做我想做的事吗？