当前位置: 首页 > 知识库问答 >
问题:

iOS8删除了“最小UI”视口属性,还有其他“软全屏”解决方案吗?

谷奕
2023-03-14

(这是一个由多个部分组成的问题,我将尽最大努力总结该场景。)

我们目前正在构建一个响应式网络应用程序(新闻阅读器),允许用户在选项卡内容之间滑动,以及在每个选项卡内容内垂直滚动。

解决此问题的常见方法是使用填充浏览器视口的包装器div,将overflow设置为hiddenauto,然后在其中水平和/或垂直滚动。

这种方法很棒,但有一个主要缺点:由于文档的高度与浏览器视口完全相同,移动浏览器不会隐藏地址栏/导航菜单。

有许多黑客和视口属性使我们能够获得更多的屏幕不动产,但没有一个比最小ui(在iOS 7.1中引入)更有效。

昨天有消息称,iOS 8 beta4已从Mobile Safari中删除了最小ui(请参阅iOS 8发行说明中的Webkit部分),这让我们感到疑惑:

Q1.是否仍然可以隐藏移动Safari上的地址栏?

据我们所知,iOS7不再响应window.scrollTohack,这表明我们必须忍受较小的屏幕空间,除非我们采用垂直布局或使用移动网络-支持应用程序的

问题2。还可能有类似的软全屏体验吗?

我所说的软全屏实际上是指不使用支持移动web应用的元标签。

我们的Web应用程序是可访问的,任何页面都可以使用本地浏览器菜单进行书签或共享。通过添加移动网络应用功能,我们防止用户调用这样的菜单(当它保存到主屏幕时),这会混淆和对抗用户。

最小界面曾经是中间地带,默认情况下隐藏菜单,但通过点击保持其可访问性——尽管苹果可能因为其他可访问性问题(例如用户不知道点击哪里激活菜单)而删除了它。

第三季度。全屏体验值得这么麻烦吗?

似乎在不久的将来iOS上不会出现全屏API,但即使如此,我也看不出菜单将如何保持可访问性(Android上的Chrome也是如此)。

在这种情况下,也许我们应该让移动Safari保持原样,并考虑视口高度(对于iPhone 5,它是460 = 568 - 108,其中108包括操作系统栏、地址栏和导航菜单;对于iPhone 4或更高版本,它是372)。

希望听到一些替代方案(除了构建本地应用程序)。

共有3个答案

马渊
2023-03-14

的确,最小用户界面可能既有用也有害,我想这种权衡现在有了另一种平衡,有利于更新、更大的苹果手机。

我在处理HTML5应用的js框架时一直在处理这个问题。在尝试了许多解决方案后,每一个都有各自的缺点,我屈服于考虑苹果手机在6岁之前失去的空间。鉴于这种情况,我认为唯一可靠和可预测的行为是预先确定的行为。

简言之,我最终阻止了任何形式的最小用户界面,所以至少我的屏幕高度总是相同的,你总是知道你的应用程序的实际空间。

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

编辑

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

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

然后:

>

  • 然后使用js,我将#main的高度设置为窗口的可用高度。这也有助于处理iOS和Android中发现的其他滚动错误。这也意味着你需要处理如何更新它,只需注意;

    当到达滚动的边界时,我会阻止过度滚动。这一点在我的代码中更为深入,但我认为您也可以遵循这个答案的基本功能原则。我想它可以有一点flickr,但会起作用的。

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

  • 何海
    2023-03-14

    由于没有编程方式来模拟最小用户界面,因此我们提出了一种不同的解决方法,使用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>
    
    孟成文
    2023-03-14

    iOS 8不再支持最小ui视口属性。然而,最小用户界面本身并没有消失。用户可以通过“触摸-向下拖动”手势进入最小用户界面。

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

    这些观察结果是作为开发RIM的一部分的研究结果——

    当页面加载时,边缘将创建一个跑步机元素。跑步机元件用于给用户提供滚动空间。跑步机元素的存在确保用户可以进入最小UI视图,并且如果用户重新加载页面或更改设备方向,该视图将继续保留。用户在整个时间内是不可见的。这个元素有IDbrim-tre机

    在加载页面或更改方向后,边缘使用尖叫检测页面是否处于最小UI视图(如果内容高度大于视口,以前处于最小ui且已重新加载的页面将保留在最小ui视图中高度)。

    当页面处于最小ui中时,RIM将禁用文档的滚动(它以一种安全的方式执行此操作,不会影响主元素的内容)。禁用文档滚动可防止向上滚动时意外离开最小ui。按照最初的iOS 7.1规范,轻触顶部栏可以恢复chrome的其余部分。

    最终结果如下所示:

    为了便于编写文档,如果您喜欢编写自己的实现,值得注意的是,您不能在orientationchange事件之后直接使用CREAM来检测设备是否处于最小ui中,因为在旋转动画结束之前,窗口尺寸不会反映新的方向。您必须将侦听器附加到OrientionChangeEnd事件。

    尖叫和方向改变是这个项目的一部分。

     类似资料:
    • (这是一个包含多个部分的问题,我将尽力总结一下这个场景。) 我们目前正在构建一个响应式web应用程序(新闻阅读器),它允许用户在选项卡内容之间滑动,以及在每个选项卡内容内垂直滚动。 解决此问题的常用方法是使用包装器填充浏览器视口,将设置为或,然后在其中水平和/或垂直滚动。 这种方法很棒,但有一个主要缺点:由于文档的高度与浏览器视口完全相同,移动浏览器不会隐藏地址栏/导航菜单。 有许多hacks和v

    • 我知道苹果发布了基于蓝牙4.0协议的iBeacon。 在任何蓝牙设备中,如果我们使用以下代码对设备进行编码: 表示呈现此蓝牙设备是iBeacon蓝牙设备。 我的问题是,如果我定义了自己的协议,这意味着我会改变它 是否有一种可能性,我可以通过iphone识别我自己定义的蓝牙设备,而无需在iphone上添加识别设备。 苹果是否支持定制ibeacon? 编辑根据davidgyoung所说,我对stack

    • 问题内容: 我想知道是否有一种方法比使用然后将其用作JFrame的尺寸然后将JFrame设置为更好?Java中是否会有某种预构建的功能来控制图形卡以实现真正的全屏显示? 问题答案: 您正在追求所谓的“全屏独家模式” 请查看全屏独占模式以了解更多详细信息。 但是请理解,它在Swing中不能很好地发挥作用。 在Mac OS X 10.7下,您可以使用来访问它为应用程序提供的全屏支持 。 查看OSX L

    • 本文向大家介绍django2.2安装错误最全的解决方案(小结),包括了django2.2安装错误最全的解决方案(小结)的使用技巧和注意事项,需要的朋友参考一下 安装报错类型,解决方案; 1. 数据库连接报错 mysqldb只支持python2,pymysql支持3,都是使用c写的驱动,性能更好 解决方案: 修改数据库:mysqldb=>pymysql 2. 因为切换数据库导致版本错误 raise

    • 问题内容: 所以可以说我有这个界面: 我有一个实现它的类: 如果我想使用接口IBox,则无法以这种方式实际创建它的实例: 对?所以我实际上必须这样做: 如果是这样,那么接口的唯一目的是确保实现接口的类中具有接口所描述的正确方法?还是接口还有其他用途? 问题答案: 接口是使代码更灵活的一种方法。你要做的是: 然后,稍后,如果你决定要使用其他类型的框(也许还有另一个库,其中框的类型更好),则将代码切换

    • 问题内容: 在SQL Server中有批量删除的解决方案吗? 我不能使用TRUNCATE,因为我想使用WHERE来限制行。 是否有诸如批量复制(bcp)之类的用于删除数据的东西? 问题答案: 不。 您需要带WHERE子句的DELETE:这是标准SQL。 您可以做的是批量删除,如下所示: 或者,如果您要删除很高比例的行…