如何在放大移动设备时使导航栏正确显示？

Question

我用一个nav元素制作了一个导航栏，其中包含一个大的div元素。然后div元素包含三个较小的div元素。

我做了nav元素position: fixed; min-width: 100vw。

大div元素有position: relative; height: 10vw。

所有三个小格子有display: inline-block和一些width和margins，第三个小格子有position: absolute; right: 0。

当我在OSX的最新Chrome版本中测试它们时，这些设置非常适用，但是当我通过iPad（Safari和Chrome for iOS）查看页面并使用两根手指放大时，导航的一部分酒吧不在屏幕上。

我尽量不使用min-width: 100vw风格，但只拿到第三div从导航栏进入一个新的线滴出被放大时的结果。

任何能告诉我如何解决这个问题在缩放时使条形图正确显示？在head节<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />：

Here is the nav bar I work on.

Answer 1

添加的代码。这将完全禁用缩放...

也尝试定义都导航的高度和宽度。