ios的移动版Safari版本号

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ios的移动版Safari版本号相关的知识,希望对你有一定的参考价值。

参考技术A 摘自国外网站,记录下方便查询
3.2.2 - Mobile Safari 4.0.4
4.3.3 - Mobile Safari 5.02 - iPhone 3g
5.0 - Mobile Safari 5.1
5.1 - Mobile Safari 5.1
6.0 - Mobile Safari 6.0 - iPhone 3gs
7.1 - Mobile Safari 7.1 - iPhone 4
8.3 - Mobile Safari 8.0
9.2.1 - Mobile Safari 9.0 - iPhone 4s
11.2.5 - Mobile Safari 11.0

如何强制显示移动 Safari 底部导航栏以编程方式显示?

【中文标题】如何强制显示移动 Safari 底部导航栏以编程方式显示?【英文标题】:How might one force-show the mobile Safari bottom nav bar to show programmatically? 【发布时间】:2016-02-12 04:36:26 【问题描述】:

我的网页底部有一个用于 CTA(号召性用语)的固定按钮。在较新版本的 iOS 上向下滚动页面,移动 Safari 会隐藏底部导航栏(带有后退、前进、共享、书签和新标签按钮)。如果您单击 CTA 按钮,而不是执行该操作,移动版 Safari 会显示底部导航栏。

作为一种解决方案,我一直希望强制显示底部导航栏。有没有办法做到这一点? Jack Threads 在移动设备上查看时,Thread Flip 的移动站点在查看单个项目时都能够做到这一点。

到目前为止,我无法对此进行逆向工程。有谁知道力秀是怎么完成的吗?

相关: Buttons aligned to bottom of page conflict with mobile Safari's menu bar 和 Prevent Mobile Safari from presenting toolbar when bottom of viewport is tapped

【问题讨论】:

【参考方案1】:

这个问题有更好的解决方案(我认为)。我在页面加载时检查 Windows 的 innerHeight。滚动时,如果高度至少增加 50 像素,我可以将按钮升高 25 像素。 25px 似乎是最佳选择,您需要触摸按钮的最底部以显示工具栏。这是一个现场演示和代码:https://visztpeter.me/demos/ios.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fix tap for button at the bottom in iOS Safari when the toolbar is gone</title>
    <style type="text/css">
      div 
        margin:20px;
        height:2000px;
        background:gray
      

      button 
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        height:48px;
        background:blue;
        border:none;
        transition: all ease 0.2s;
      
      
      .ios-toolbar-gone button 
        transform: translateY(-25px);
      
    </style>
  </head>
  <body>
    <div></div>
    <button></button>
    <script>
      var baseWindowHeight = Math.max(window.innerHeight);
      var classAdded = false;
      var documentBody = document.body;
      document.addEventListener('scroll', function(e)
        var newWindowHeight = Math.max(window.innerHeight);
        if(newWindowHeight-50 > baseWindowHeight) 
          if (! documentBody.classList.contains("ios-toolbar-gone")) 
            documentBody.classList.add("ios-toolbar-gone");
          
         else 
          if (documentBody.classList.contains("ios-toolbar-gone")) 
            documentBody.classList.remove("ios-toolbar-gone");
          
        
      );
    </script>
  </body>
</html>

【讨论】:

var documentBody = document.body; 行未使用 :-) 我看到这个解决方案的主要问题是事件监听器的必要性,这是我在纯 CSS 解决方案中避免的。这个解决方案确实有效(并且是我研究过的),但我的目标是获得最高效的解决方案。【参考方案2】:

我的回答是,不要尝试。

虽然 Jon Catmull 的回答在技术上确实会强制浏览器保留底部工具栏。在试验中,我在设置之后经历了巨大的性能下降。

这方面的一个例子是https://www.contiki.com/uk/en,工具栏永久显示,但 Chrome 和 Safari 之间的性能损失很明显。

在调查了其他网站之后,似乎全世界都刚刚接受了这种双击是必要的邪恶。

https://www.bbc.co.uk/news,浏览器底部出现突发新闻,如果ui最小化,第一次点击返回底部工具栏,第二次点击进入文章。

amazon、ebay 等工具栏根据浏览器默认设置最小化。对底部约 30 像素中的链接的任何点击都会启用工具栏。

虽然这里的其他答案中有技术解决方案,但我不认为双击与性能损失相比

【讨论】:

看起来 contiki 现在也放弃了这种方法,这很遗憾,因为它是一个非常有用的例子【参考方案3】:

我相信高度:100% 是要走的路。看起来这似乎让 Safari 认为它还不如显示栏,因为没有内容试图在它后面,然后你在 100% 高度元素中添加滚动。

我的问题有所不同,因为我的按钮处于固定位置模式,我不希望 Safari 底部导航一直显示,但是当我的移动过滤器导航打开时,它需要显示。

基本上应用下面的代码(例如在菜单打开类上)。然后将菜单定位为 position: fixed 和 height: 100%

html.menu-open 
    height: 100%;

    body 
        position: fixed;
        width: 100%;
        top: 0px;
        overflow: hidden;
    


.menu 
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: auto;

此处的工作示例:

https://www.electronicsadvisor.com/products/51/washing-machines-tumble-dryers

    打开链接 向下滚动以隐藏 safari 底部导航 点击屏幕顶部附近的过滤器按钮

过滤器菜单将打开并强制打开 safari 导航。

示例截图:

在点击过滤器按钮之前:

然后当用js打开导航时,我应用上面的样式并强制打开导航

【讨论】:

这是我尝试过的唯一有效的解决方案。可能是因为不再使用-webkit-overflow-scrolling(作为大多数其他解决方案的一部分提出)。【参考方案4】:

我正在粘贴https://benfrain.com/the-ios-safari-menu-bar-is-hostile-to-web-apps-discuss/#comment-119538 中提到的解决方案,该解决方案涉及如何为https://app.ft.com 完成此操作:

诀窍是将 height: 100% 添加到 html、body 和任何地方 使用 100vh 的 CSS。不需要 js 浏览器检测,因为它 在 iOS Chrome、Safari 全屏或 Android 上不会导致异常 浏览器。

【讨论】:

这就足够了:body position: fixed; overflow: hidden; 【参考方案5】:

我想我可能已经找到了答案。将您的内容设置为具有以下样式:

height: 100%(允许内容填充视口并超出 底部) overflow-y: scroll(允许您在视口下方滚动; 默认值可见) -webkit-overflow-scrolling: touch(平滑任何滚动行为)

似乎强制 Safari 中的 iOS 菜单始终出现。那样的话,按钮点击实际上会起作用,而不是打开 Safari 菜单。

不幸的是,您必须将此 CSS 与 JavaScript 浏览器检测配对,因为它会扰乱 iOS Chrome(也包括 webkit)上的滚动。仅使用 CSS 无法针对所有版本的 iOS Safari。

【讨论】:

非常有前途!不幸的是,这似乎使scrollTop 总是报告 0,而window.scrollTo(0,0) 不再起作用。任何解决方法? (我在 iOS 11.2 上注意到了这一点。) 很遗憾,我很久没有看这个问题了,但我肯定记得那个问题。你想使用哪个元素的 scrollTop?【参考方案6】:

我也有同样的问题。我们正在努力在我们的网站上实现底部导航,而 safari 给我们带来了问题,因为点击屏幕底部会打开 Safari 的底部导航,迫使用户点击两次。我们提出的最佳解决方案是在导航下方添加一个 44 像素的空间,这看起来非常糟糕。如果我可以强制 safari 的导航保持打开状态,这样它就可以填充那个空间,而不是一个基本上无用的空块。

【讨论】:

以上是关于ios的移动版Safari版本号的主要内容,如果未能解决你的问题,请参考以下文章

如何查看iphone6的safari版本号

Appium+python自动化16-启动ios上Safari浏览器

iOS Xcode 获取项目版本号

如何使用jquery判断浏览器类型和版本号

移动端ios14版本h5无法

LINUX内核版本号每位都代表啥?