如何防止 (bootstrap) 固定顶部导航在移动设备上缩放
How to prevent (bootstrap) fixed top navigation from zooming on mobile
在使用bootstrap3的固定顶部导航时，我注意到当用户在手机上使用原生缩放时，顶部导航也变得很大。这会导致非常糟糕的用户体验，其中导航会掩盖大部分内容并最终自行崩溃，如以下示例所示：
这个问题可以在 http://www.exploretrade.info/ 上看到，并且似乎也影响了许多其他使用这种导航的网站；一个常见的解决方案是禁用用户缩放，但这会损害网站的可访问性。
我的问题是：当用户在移动设备上缩放内容时，如何保持固定顶部导航的显示大小不变
- 使用JavaScript，可以计算出当前应用的设备缩放，并动态更新css
transform: scale指令2
- 然而，这似乎不适用于
position: fixed 元素，它在缩小后最终以某种方式居中在屏幕上
您遇到的问题是由于 header 与内容 div 之间的交互。 header 与内容面板重叠，因此当您缩放时 header 会变大并与更多内容重叠。如果您将导航与内容分开，它可能会解决您的问题。基线 bootstrap 导航应该设置为中殿位于主要内容容器上方的方式。
从导航中删除固定位置。删除这个：
position:fixed;
移除导航底部的边距：
margin-bottom: 27px;
现在，您的导航和内容不会重叠，并且事物会以更清晰的方式放大。您可能还想将 img-responsive class 添加到您的徽标中，这将有助于它正确缩放，因此它不会与移动设备上的菜单按钮重叠。
防止Bootstrap的navbar-top-fixed在手机上缩放
最终结果：
仅在移动设备上，可以将缩放系数计算为 window.innerWidth 与屏幕宽度的比率，如 [2] 所示。当用户切换缩放时，会触发调整大小事件；此外，当重新加载之前缩放过的页面时，缩放系数会保持不变。因此，可以使用 jQuery 动态更新 CSS 保持 header 形状的变换。请注意，对于 position: fixed，还需要对原点进行变换。将 class device-fixed-height 应用于 bootstrap nav 并将 device-fixed-width 应用于品牌徽标和汉堡包图标，然后产生非常接近所需的结果。
- 错误：随着页面的缩放，汉堡包图标仍然向左移动了一点。任何修复它的建议都将受到赞赏！
- 测试于：Android 4.4
实例：http://www.exploretrade.info/other/example-fixed-nav-after-zoom.html
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Bootstrap zoom-proof fixed top nav</title>
<!-- Bootstrap core CSS -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
padding-top: 50px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top device-fixed-height">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed device-fixed-width" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand device-fixed-width" href="#">Example</a>
</div>
<div id="navbar" class="collapse navbar-collapse device-fixed-width">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
<p>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.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
// from https://signalvnoise.com/posts/2407-device-scale-user-interface-elements-in-ios-mobile-safari
function getDeviceScale() {
var deviceWidth, landscape = Math.abs(window.orientation) == 90;
if (landscape) {
// iPhone OS < 3.2 reports a screen height of 396px
deviceWidth = Math.max(480, screen.height);
} else {
deviceWidth = screen.width;
}
return window.innerWidth / deviceWidth;
}
// mobile only - keep the position:fixed header at constant size when page is zoomed
if (navigator.userAgent.match(/Mobi/)) {
$(window).on('load scroll', function() {
var ds = getDeviceScale();
$('.device-fixed-height').css('transform','scale(1,' + ds + ')')
.css('transform-origin', '0 0');
$('.device-fixed-width').css('transform', 'scale(' + ds + ',1)')
.css('transform-origin', '0 0');
})
}
</script>
</script>
</body>
</html>
在使用bootstrap3的固定顶部导航时，我注意到当用户在手机上使用原生缩放时，顶部导航也变得很大。这会导致非常糟糕的用户体验，其中导航会掩盖大部分内容并最终自行崩溃，如以下示例所示：
这个问题可以在 http://www.exploretrade.info/ 上看到，并且似乎也影响了许多其他使用这种导航的网站；一个常见的解决方案是禁用用户缩放，但这会损害网站的可访问性。
我的问题是：当用户在移动设备上缩放内容时，如何保持固定顶部导航的显示大小不变
- 使用JavaScript，可以计算出当前应用的设备缩放，并动态更新css
transform: scale指令2 - 然而，这似乎不适用于
position: fixed元素，它在缩小后最终以某种方式居中在屏幕上
您遇到的问题是由于 header 与内容 div 之间的交互。 header 与内容面板重叠，因此当您缩放时 header 会变大并与更多内容重叠。如果您将导航与内容分开，它可能会解决您的问题。基线 bootstrap 导航应该设置为中殿位于主要内容容器上方的方式。
从导航中删除固定位置。删除这个：
position:fixed;
移除导航底部的边距：
margin-bottom: 27px;
现在，您的导航和内容不会重叠，并且事物会以更清晰的方式放大。您可能还想将 img-responsive class 添加到您的徽标中，这将有助于它正确缩放，因此它不会与移动设备上的菜单按钮重叠。
防止Bootstrap的navbar-top-fixed在手机上缩放
最终结果：
仅在移动设备上，可以将缩放系数计算为 window.innerWidth 与屏幕宽度的比率，如 [2] 所示。当用户切换缩放时，会触发调整大小事件；此外，当重新加载之前缩放过的页面时，缩放系数会保持不变。因此，可以使用 jQuery 动态更新 CSS 保持 header 形状的变换。请注意，对于 position: fixed，还需要对原点进行变换。将 class device-fixed-height 应用于 bootstrap nav 并将 device-fixed-width 应用于品牌徽标和汉堡包图标，然后产生非常接近所需的结果。
- 错误：随着页面的缩放，汉堡包图标仍然向左移动了一点。任何修复它的建议都将受到赞赏！
- 测试于：Android 4.4
实例：http://www.exploretrade.info/other/example-fixed-nav-after-zoom.html
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Bootstrap zoom-proof fixed top nav</title>
<!-- Bootstrap core CSS -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
padding-top: 50px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top device-fixed-height">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed device-fixed-width" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand device-fixed-width" href="#">Example</a>
</div>
<div id="navbar" class="collapse navbar-collapse device-fixed-width">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
<p>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.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
// from https://signalvnoise.com/posts/2407-device-scale-user-interface-elements-in-ios-mobile-safari
function getDeviceScale() {
var deviceWidth, landscape = Math.abs(window.orientation) == 90;
if (landscape) {
// iPhone OS < 3.2 reports a screen height of 396px
deviceWidth = Math.max(480, screen.height);
} else {
deviceWidth = screen.width;
}
return window.innerWidth / deviceWidth;
}
// mobile only - keep the position:fixed header at constant size when page is zoomed
if (navigator.userAgent.match(/Mobi/)) {
$(window).on('load scroll', function() {
var ds = getDeviceScale();
$('.device-fixed-height').css('transform','scale(1,' + ds + ')')
.css('transform-origin', '0 0');
$('.device-fixed-width').css('transform', 'scale(' + ds + ',1)')
.css('transform-origin', '0 0');
})
}
</script>
</script>
</body>
</html>