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版本号的主要内容,如果未能解决你的问题,请参考以下文章