如何防止（bootstrap）修复顶部导航从缩放移动设备 [英] How to prevent (bootstrap) fixed top navigation from zooming on mobile

问题描述

当使用bootstrap 3的固定顶部导航时，我注意到当用户在移动设备上使用原生缩放时，顶部导航也变得非常大。这导致了非常差的用户体验，导航模糊了大部分内容并最终破坏了自己，如下例所示：

问题可以在

源代码：

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< meta charset =utf-8> 
< meta http-equiv =X-UA-Compatiblecontent =IE = edge> 
< meta name =viewportcontent =width = device-width，initial-scale = 1> 
< meta name =descriptioncontent => 
< meta name =authorcontent => 
< link rel =iconhref =../../ 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> 
 
<！ - 此模板的自定义样式 - > 
< 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 =buttonclass =navbar-toggle collapsed device-fixed-widthdata-toggle =collapsedata-target =＃navbararia-expanded =falsearia-controls = 导航栏 > 
< span class =sr-only>切换导航< / span> 
< i class =fa fa-bars>< / i> 
< / button> 
< a class =navbar-brand device-fixed-widthhref =＃>示例< / a> 
< / div> 
< div id =navbarclass =collapse navbar-collapse device-fixed-width> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃>主页< / a>< / li> 
< li>< a href =＃about>关于< / a>< / li> 
< li>< a href =＃contact>联系< / a>< / li> 
< / ul> 
< / div><！ -  /。nav-collapse  - > 
< / div> 
< / nav> 
< div class =container> 
< div class =starter-template> 
< h1> Bootstrap启动器模板< / h1> 
< p class =lead>使用此文档作为快速启动任何新项目的方法。< br>所有你得到的是这个文本和一个主要是准系统的HTML文档。< / p> 
 
< p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。在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，在porttitor est suscipit。 Pellentesque consequat condimentum elit，在sagittis erat euismod nec。 Fusce consequat purus quis turpis volutpat，vel luctus tortor consectetur。在lectus简历enim fringilla faucibus的Sed。 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核心JavaScript 
 ========================== ========================  - > 
<！ - 放置在文档的末尾，以便页面加载更快 - > 
< 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> 
 
 //来自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报告屏幕高度为396px 
 deviceWidth = Math.max（480，screen.height）; 
} else {
 deviceWidth = screen.width; 
} 
返回window.innerWidth / deviceWidth; 
} 
 
 //仅限移动设备 - 当页面缩放时保持位置：固定标头的常量大小
 if（navigator.userAgent.match（/ Mobi /））{
 $（窗口）.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> 
  

When using the fixed top navigation of bootstrap 3, I noticed that when users use the native zoom on mobile, the top navigation also becomes very large. This leads to a pretty poor user experience, where the navigation obscures much of the content and ends up broken itself, as the following example shows:

The issue can be seen in the wild on http://www.exploretrade.info/ and also seems to affect many other sites using this kind of navigation; a common solution is to disable user zoom, but this hurts accessibility of the site.

My question is: how do I keep the displayed size of the fixed top navigation constant when a user is zooming the contents on mobile

• Using JavaScript, one can calculate the current device zoom applied, and dynamically update the css transform: scale directive 2
• However, this appears not to work for position: fixed element, which end up somehow centered in the screen after scaling down

解决方案

Keeping Bootstrap's navbar-top-fixed from zooming on mobiles

The final result:

On mobile devices only, is possible to calculate the zoom factor as the ratio of window.innerWidth and the screen width, as shown in [2]. When the user toggles zoom, the resize event is triggered; moreover, when a page is reloaded that was previously zoomed, the zoom factor is maintained. Thus, one use jQuery to dynamically update CSS transforms that keep the header in shape. Note that, with position: fixed, a transformation of the origin is also required. Applying class device-fixed-height to the bootstrap nav and device-fixed-width to brand logo and hamburger icon then produce very close to the desired result.

• Bug: As the page is zoomed, the hamburger icons still moves a bit to the left. Any suggestions how to fix it are appreciated!
• Tested on: Android 4.4

Live example: http://www.exploretrade.info/other/example-fixed-nav-after-zoom.html

Source code:

<!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>

这篇关于如何防止（bootstrap）修复顶部导航从缩放移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！