iOS 8删除了"minimal-ui"视口属性,还有其他"软全屏"解决方案吗？

Question

iOS 8删除了"minimal-ui"视口属性,还有其他"软全屏"解决方案吗？

bit*_*inn 185 javascript css mobile-safari ios responsive-design

(这是一个多部分的问题,我将尽力总结这个场景.)

我们目前正在构建一个响应式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).

很想听到一些替代方案(除了构建本机应用程序).

Answer 1

Gaj*_*jus 83

iOS 8中不再支持 minimal-ui viewport属性.但是,minimal-ui本身并没有消失.用户可以通过"触摸 - 向下拖动"手势输入minimal-ui.

管理视图状态有几个先决条件和障碍,例如,对于最小化工作,必须有足够的内容使用户能够滚动; 要使minimal-ui保持不变,窗口滚动必须在页面加载和方向更改后偏移.但是,没有办法使用screen变量计算minimal-ui的维数,因此无法预先知道用户何时处于minimal-ui.

这些观察结果是研究结果,是开发iOS 8的Brim视图管理器的一部分.最终实现以下列方式工作:

当页面加载时,Brim将创建一个跑步机元素.Treadmill元素用于为用户提供滚动空间.跑步机元件的存在确保用户可以进入最小ui视图,并且如果用户重新加载页面或改变设备方向,它将继续存在.它在整个时间内对用户是不可见的.此元素具有ID brim-treadmill.

在加载页面或更改方向后,Brim正在使用 Scream来检测页面是否在minimal-ui视图中(以前在minimal-ui中已经重新加载的页面将保留在minimal-ui中,如果内容高度为大于视口高度).

当页面在minimal-ui中时,Brim将禁用文档的滚动(它以安全的方式执行此操作,不会影响主元素的内容).禁用文档滚动可防止在向上滚动时意外地离开minimal-ui.根据最初的iOS 7.1规范,点击顶部栏可以恢复其余的镀铬.

最终结果如下:

在iOS模拟器中使用.

为了便于记录,如果您更喜欢编写自己的实现,值得注意的是,在orientationchange事件之后,您不能使用Scream来检测设备是否在minimal-ui中,因为尺寸不会反映新的方向,直到旋转动画已经结束.您必须将一个侦听器附加到orientationchangeend事件.window

作为该项目的一部分,已经开发了尖叫和定向变换.

这真是永无止境的故事.我是HTML中的游戏开发人员,iOS 7.1中的minimal-ui工作得很好 - 这是使应用程序全屏运行并且同时能够触摸屏幕底部的唯一方法.页面滑动的解决方案很不错,但还不够好:( Apple,我们需要正确实现游戏的全屏API. (47认同)
看起来很好!没有初始滚动,我可以强制minimal-ui吗？ (4认同)
@Petr:我完全同意.当这个修复程序在7.1中宣布时,我们很快就推出了一个新的结账购买流程,它将主要的CTA固定在屏幕的底部..这很有效,转换得很好!它感觉非常"原生"而且无缝.我认为这是确切的问题.如果您考虑一下,那么感觉原生的网络应用并不符合苹果的最佳利益.事实上,这与他们的App Store垄断直接存在利益冲突.这就是IMO唯一合理的理由,为什么一个有意义的功能被修复然后被故意删除.#my2Cents :) (3认同)
这比我原来的答案更广泛,标记为新的答案,直到更好的解决方案到来:) (2认同)
@PetrUrban我确信Apple希望您将游戏发布为手机应用程序,而不是让您通过网络服务.他们最近允许广告拦截器进行狩猎的决定巩固了这一想法. (2认同)

Answer 2

bit*_*inn 20

由于没有模仿的编程方式minimal-ui,我们提出了一个不同的解决方法,使用calc()和已知的iOS地址栏高度对我们有利:

以下演示页面(也可在gist上提供,更多技术细节)将提示用户滚动,然后触发软全屏(隐藏地址栏/菜单),其中标题和内容填充新视口.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Test</title>

    <style>
        html, body {
            height: 100%;
        }

        html {
            background-color: red;
        }

        body {
            background-color: blue;
            margin: 0;
        }

        div.header {
            width: 100%;
            height: 40px;
            background-color: green;
            overflow: hidden;
        }

        div.content {
            height: 100%;
            height: calc(100% - 40px);
            width: 100%;
            background-color: purple;
            overflow: hidden;
        }

        div.cover {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            display: none;
        }

        @media screen and (width: 320px) {
            html {
                height: calc(100% + 72px);
            }

            div.cover {
                display: block;
            }
        }
    </style>
    <script>
        var timeout;

        window.addEventListener('scroll', function(ev) {

            if (timeout) {
                clearTimeout(timeout);
            }

            timeout = setTimeout(function() {

                if (window.scrollY > 0) {
                    var cover = document.querySelector('div.cover');
                    cover.style.display = 'none';
                }

            }, 200);

        });
    </script>
</head>
<body>

    <div class="header">
        <p>header</p>
    </div>
    <div class="content">
        <p>content</p>
    </div>
    <div class="cover">
        <p>scroll to soft fullscreen</p>
    </div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 3

Fra*_*rti 9

告别minimal-ui(现在)

这是真的,minimal-ui可能既有用也有害,而且我认为权衡现在有另一个平衡,有利于更新,更大的iPhone.

我在处理HTML5应用程序的js框架时一直在处理这个问题.经过多次尝试的解决方案,每个都有它们的缺点,我放弃了考虑到6以上的iPhone丢失的空间.鉴于这种情况,我认为唯一可靠和可预测的行为是预先确定的行为.

简而言之,我最终阻止了任何形式的minimal-ui,所以至少我的屏幕高度始终是相同的,你总是知道你的应用程序的实际空间.

在时间的帮助下,足够的用户将拥有更多的空间.

编辑

我是怎么做的

这有点简化,用于演示目的,但应该适合您.假设你有一个主容器

html, body, #main {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.view {
  width: 100%;
  height: 100%;
  overflow: scroll;
}

Run Code Online (Sandbox Code Playgroud)

然后:

然后用js,我将#main高度设置为窗口的可用高度.这也有助于处理iOS和Android中的其他滚动错误.这也意味着你需要处理如何更新它,只需注意;
我到达滚动的边界时阻止过度滚动.这个在我的代码中有点深入,但我认为你也可以遵循这个答案的基本功能原则.我认为它可能会稍微改变,但会完成这项工作.

看演示(在iPhone上)

作为旁注:这个应用程序也是可收藏的,因为它使用内部路由来散列地址,但我还添加了一个提示iOS用户添加到家.我觉得这种方式有助于忠诚度和回访者(因此失去的空间又回来了).

根据我的 iPhone 5，您的演示不适用于 iOS8。 (2认同)

Answer 4

小智 7

我发现修复此问题的最简单方法是将用户代理为iphone的任何请求的body和html元素的高度设置为100.1%.这仅适用于横向模式,但这就是我所需要的.

html.iphone, 
html.iphone body { height: 100.1%; }

Run Code Online (Sandbox Code Playgroud)

请访问https://www.360jungle.com/virtual-tour/25查看

归档时间：	11 年，3 月前
查看次数：	140258 次
最近记录：	6 年，5 月前