Different web browsers (Webkit & Mozilla)

Navigation
1

Use Bootstrap 3 in my project. I've used Mozilla throughout the design process, and responsive design works great on it and Edge. When I went to test the pages in browsers that use WebKit (Chrome and Safari), they appear very different from what I had seen in Mozilla.

It seems that the same resolution activates the .sm class in Mozilla, but remains in .md in Webkit. Below is a comparison of the same page in two browsers.

Left: Chrome . Right: Mozilla Firefox .

Notice that in Chrome, navbar did not go so far as to hide the links and display a burger menu.

How can I resolve this? Thank you.

    
asked by anonymous 02.01.2017 / 21:34

1 answer

3

Meta tag viewport . It gives the browser information on how to control page dimensions regardless of the browser (or device used). 

 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

Source: Basic template ; Setting The Viewport .

    
02.01.2017 / 22:07
Loading screen with gif in loading page html Authentication with Spring Security