Different responsiveness between browsers (Webkit & Mozilla)

Asked

Viewed 258 times

1

I use Bootstrap 3 in my project. I used Mozilla throughout the creation process, and the 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 class .sm on Mozilla, but remains on .md in the Webkit. Below a comparison of the same page in two browsers.

Imagens webkit e mozilla On the left: Chrome. On the right: Mozilla Firefox.

Note that in Chrome, the navbar didn’t even get to the point of hiding the links and displaying a burger menu.

How can I fix this? Thank you.

mobile bootstrap-3 responsive-layout firefox webkit
  • 1

    Tell me, you’re following this here: Basic template?

  • @Shutupmagda Opa man, hit the nail on the head! The line was missing <meta name="viewport" content="width=device-width, initial-scale=1"> in my code. You can write a reply in that post to mark as answered?

1 answer

3


Meta tag viewport. It gives the browser information on how to control the 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>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

Source: Basic template; Setting The Viewport.

Browser other questions tagged mobile bootstrap-3 responsive-layout firefox webkit

You are not signed in. Login or sign up in order to post.