ios address bar triggered when angular ui router state changes

I am using Angular UI Router. Whenever I click on a link with ui-sref the address bar from ios mobile browser shows up. For example when I scroll down, the address bar hides and if I click on a link and the page transition finishes the ui address bar shows up instantly. This makes it less user friendly as the page suddenly shifts a little downwards because of the address bar.

我正在使用Angular UI路由器。每当我点击与ui-sref的链接时,ios移动浏览器的地址栏就会显示出来。例如,当我向下滚动时,地址栏会隐藏,如果我点击链接并且页面转换完成,则ui地址栏会立即显示。由于地址栏因为页面突然向下移动一点,这使得用户不太友好。

This website has the same issue that I have.

这个网站和我有同样的问题。

I have found a website that doesn't have this issue although they are not using angular.

我找到了一个没有这个问题的网站,虽然他们没有使用角度。

This does not happen on android chrome. And only happens in the ios safari. The version that I have tested in was ios 9.

这不会发生在Android chrome上。并且只发生在ios safari中。我测试过的版本是ios 9。

I have tried overflow hidden but this is not the solution that I want because then the address bar is always visible.

我试过隐藏的溢出但这不是我想要的解决方案,因为地址栏始终可见。

What's triggering this behavior?

是什么引发了这种行为?

1 个解决方案

#1

I have not tested this, but I remember having a similar issue a while back.

我没有测试过这个,但我记得有一段时间有类似的问题。

I think you could add this meta tag:

我想你可以添加这个元标记:

<meta name="viewport" content="minimal-ui”>

Check out these other posts: Post 1, Post 2.

看看这些其他帖子:帖子1,帖子2。

Note: minimal-ui is no longer supported in iOS 8 and above (More info). However, not all users have upgraded to iOS 8, so there is still a reason to add it to your project.

注意:iOS 8及更高版本不再支持minimal-ui(更多信息)。但是,并非所有用户都已升级到iOS 8,因此仍有理由将其添加到您的项目中。

#1