相关疑难解决方法(0)
iOS 8删除了"minimal-ui"视口属性,还有其他"软全屏"解决方案吗？
(这是一个多部分的问题,我将尽力总结这个场景.)
我们目前正在构建一个响应式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).
很想听到一些替代方案(除了构建本机应用程序).
推荐指数
解决办法
查看次数
如何隐藏移动浏览器的地址栏？
移动设备上的Safari和Chrome都会在页面加载时包含可见的地址栏.当body页面滚动时,这些浏览器将滚动地址栏关闭屏幕,为网站提供更多的空间,如下图所示:
我的网站允许这个问题,我遇到了一些问题.我正在制作一个Pokedex,其中包含很长的所有口袋妖怪列表.但是,通过我设置页面的方式,它不希望将地址栏滚动到视线之外.
我的HTML看起来像:
<body>
<app> <!-- My Angular2 tag for the app, no special styles for this -->
<nav>...</nav> <!-- The red nav bar and hamburger menu, default bootstrap -->
<div class="fluid-container">...</div> <!-- The container for all pokemon entries -->
</app>
</body>
如果我滚动到列表的绝对底部(即721个条目),则再滚动会将地址栏移动到屏幕顶部.如果我触摸导航栏并将其向上拖动,则地址栏将移出屏幕.这两种方法似乎都不直观.
我想有一些方法我使用javascript滚动页面的主体将隐藏它,但到目前为止我尝试过的东西不起作用.当我这样做时,没有发生可见的滚动.
如何在页面加载后立即滚动页面以隐藏移动浏览器的地址栏？
编辑:我越是研究这个,没有用户交互就越不可能.如果我需要用户交互,用户在屏幕中心的触摸是否可能首先尝试滚动主体,然后尝试滚动包含其中所有条目的div？如果按照我想的方式工作,那么它会先滑动地址栏,然后再滑过列表.这与默认的浏览器行为相反,所以它可能不可能/简单/可靠,但我愿意尝试看看是否有任何想法.
推荐指数
解决办法
查看次数
隐藏100%高度的iPhone地址栏
关于此的很多帖子,但不完全符合我的情况.我的页面具有灵活的尺寸设置为100%宽度和100%高度,因此典型的有载滚动功能不起作用.任何想法或其他解决方案？
谢谢!
CSS:
* {
margin:0;
padding:0;
}
html, body {
width:100%;
height:100%;
min-width:960px;
overflow:hidden;
}
使用Javascript:
/mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function () {
window.scrollTo(0, 1);
}, 1000);?
推荐指数
解决办法
查看次数