如何防止（bootstrap）修复顶部导航从缩放移动设备
当使用bootstrap 3的固定顶部导航时，我注意到当用户在移动设备上使用原生缩放时，顶部导航也变得非常大。 这导致了非常糟糕的用户体验，导航模糊了大部分内容并最终破坏了自身，如下例所示：
这个问题可以在http://www.exploretrade.info/上看到，并且似乎也会影响使用这种导航的许多其他网站; 一个常见的解决方案是禁用用户缩放，但这会损害网站的可访问性。
我的问题是：当用户缩放移动设备上的内容时，如何使固定顶部导航的显示大小保持不变
- 使用JavaScript，可以计算当前应用的设备缩放，并动态更新css
transform: scale指令2 - 但是，这似乎不适用于
position: fixed元素，它在缩小后以某种方式在屏幕中居中
通过放大手机来保持Bootstrap的navbar-top-fixed
最终结果： 
仅在移动设备上，可以将缩放系数计算为window.innerWidth与屏幕宽度的比率，如[2]所示。 当用户切换缩放时，触发resize事件; 此外，当重新加载先前缩放的页面时，保持缩放因子。 因此，使用jQuery动态更新保持标头形状的CSS变换。 请注意，在position: fixed ，还需要对原点进行转换。 将类device-fixed-height应用于bootstrap nav ，将device-fixed-width应用于品牌徽标和汉堡包图标，然后产生非常接近所需结果。
- 错误：当页面被缩放时，汉堡包图标仍然向左移动一点。 任何建议如何解决它是值得赞赏的！
- 测试：Android 4.4
实例 ： http ： //www.exploretrade.info/other/example-fixed-nav-after-zoom.html
源代码：
Bootstrap zoom-proof fixed top nav Bootstrap starter template
Use this document as a way to quickly start any new project.
All you get is this text and a mostly barebones HTML document.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in metus eget nisi imperdiet dictum ac eu metus. Morbi consequat sodales porta. Nam convallis sed dolor in ullamcorper. Vestibulum ut tortor porttitor, venenatis nulla iaculis, sollicitudin metus. Mauris ut hendrerit purus, sed ultricies lacus. Proin imperdiet, lectus vel efficitur hendrerit, quam tortor efficitur sapien, vehicula viverra magna ipsum vitae lacus. Sed faucibus elit vel massa placerat, in porttitor est suscipit. Pellentesque consequat condimentum elit, at sagittis erat euismod nec. Fusce consequat purus quis turpis volutpat, vel luctus tortor consectetur. Sed in lectus vitae enim fringilla faucibus. Mauris vitae risus ut ex convallis luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam tempor ante augue, sed iaculis nisi porta quis.
您看到的问题是由于内容div上的标题之间的交互。 标题与内容面板重叠，因此当您缩放标题时，标题会变大并重叠更多内容。 如果您将导航与内容分开，它可能会解决您的问题。 应该以中心位于主内容容器上方的方式设置基线引导程序导航。
从导航中删除固定位置。 删除这个：
position:fixed;
删除导航底部的边距：
margin-bottom: 27px;
现在，您的导航和内容不会重叠，并且可以更清晰地缩放。 您还可能希望将img-responsive类添加到您的徽标，这将有助于它正确缩放，因此它不会与移动设备上的菜单按钮重叠。