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

Question

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

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

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

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

当我在OSX的最新Chrome版本中测试它们时，设置工作得非常好，但是当我通过iPad（Safari和Chrome for iOS）查看页面并使用两根手指放大时，导航栏的一部分离开了屏幕。

我尝试不使用min-width: 100vw样式，但只是在放大时只得到第三个div从导航栏中退出到新行的结果。

可以告诉我如何解决问题，以便在缩放时正确显示条形图？

Here is the nav bar I work on.

Answer 1

在<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />部分添加代码：head。这将完全禁用缩放...

还尝试定义两者导航的高度和宽度。