如何强制显示移动Safari底部导航栏以编程方式显示？ [英] How might one force-show the mobile Safari bottom nav bar to show programmatically?

问题描述

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

I have a fixed button for a CTA (call to action) at the bottom of my web page. Scrolling down the page on newer version of iOS, mobile Safari hides the bottom navigation bar (with back, forward, share, bookmark, and new tab buttons). If you click on the CTA button, instead of executing that action, mobile Safari shows the bottom nav bar.

作为一个解决方案，我一直想要强制显示底部导航栏。有办法做到这一点吗？在移动设备上查看时， Jack Threads 和 Thread Flip 的移动网站可以在查看单个项目时将其关闭。

As a solution, I was looking to alway force-show the bottom nav bar. Is there a way of doing this? Both Jack Threads when viewed on mobile, and Thread Flip's mobile site are able to pull this off when viewing an individual item.

我无法撤消到目前为止工程师。有谁知道强制表演是如何完成的？

I'm unable to reverse engineer this so far. Does anyone know how the force-show is accomplished?

相关：
与页面底部对齐的按钮与移动Safari的菜单栏冲突和
在点击视口底部时，防止Mobile Safari显示工具栏

推荐答案

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

I think I may have found an answer. Setting your content to have the following styles:

• height：100％（允许内容填充视口并超出
  底部）


• overflow-y：scroll （允许您在下方滚动）视口;
  默认值是可见的）


• -webkit-overflow-scrolling：touch （平滑任何滚动）行为）

• height: 100% (allows content to fill the viewport and go beyond the bottom)
• overflow-y: scroll (allows you to scroll below the viewport; the default value is visible)
• -webkit-overflow-scrolling: touch (to smooth any scroll behavior)

似乎强制Safari中的iOS菜单始终显示。这样，按钮点击实际上可以工作，而不是打开Safari菜单。

appears to force the iOS menu in Safari to always appear. That way, button clicks will actually work instead of opening up the Safari menu.

不幸的是，你必须将这个CSS与JavaScript浏览器检测配对，因为它会混淆滚动iOS Chrome（也是webkit）。没有办法只使用CSS定位所有版本的iOS Safari 。

Unfortunately, you have to pair this CSS with JavaScript browser detection because it messes up the scrolling on iOS Chrome (also webkit). There's no way to target all versions of iOS Safari only using only CSS.

这篇关于如何强制显示移动Safari底部导航栏以编程方式显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！