Bootstrap layout media queries not working at 767px on Chrome

问题

I have a Chrome-only problem with my Bootstrap (v3.3.5) layout css at exactly 767px where the layout styles simply aren't being applied.

Here's the behaviour after experimenting with the console on 3 browsers...

Chrome
-window.innerWidth of <= 766 - correctly shows mobile layout
-window.innerWidth of == 767 - incorrectly applies no layout styles
-window.innerWidth of >= 768 - correctly shows full screen layout

Firefox
-window.innerWidth of <=766 and ==767 - correctly shows mobile layout
-window.innerWidth of >=768 - correctly shows full screen layout

Safari
-behaves fine although window.innerWidth doesn't correctly correspond to the breakpoints (perhaps something to do with Safari not accounting for scrollbars in the same way)

All my media queries have been created as follows...

@media (max-width: 767px) {
/*small view*/
}
@media (min-width: 768px) {
/*full view*/
}

I've experimented changing these values so there's an overlap (e.g. a min-width of 767px) but it has no effect.

Apologies if this is a little vague, but I don't really know where to go from here in investigating the problem and have found only one report of similar behaviour from a previous version of bootstrap (https://github.com/twbs/bootstrap/issues/1531).

Does anyone know of any possible reason that I'd be seeing this on Chrome only? Either way, any advice on an appropriate way to investigate would be very much appreciated.

-- EDIT -- After hours of research I tested this simple file...

<html>
    <head>
        <style>
        @media (max-width: 767px) {
            .headlineText {
              font-size: 10px;
              color: red;
            }
        } 
        @media (min-width: 768px) {
            .headlineText {
              font-size: 10px;
              color: green;
            }
        }
        </style>
    </head>
    <body>
        <h1 class="headlineText">this is a headline</h1>
    </body>
</html>

On Chrome only - at 767px the text is neither green or red - it's black, Times New Roman, and considerably bigger than 10px. Of course I can't replicate this by uploading to a fiddle/codepen - so it must be something to do with the fact I'm running on a localhost (via MAMP). Absolutely zero ideas why that would be the case, but at least it doesn't seem to be something that will affect me in a live environment

回答1:

Make this full screen and resize your window. It works for me in Chrome and has no display of "does not work" in between.

.works {
  display: none;
}
.does-not-work {
  display: block;
}
@media(max-width:767px){
  .works {
    display: block;
  }
  .works::before {
    content: 'max-width: 767px | ';
  }
  .does-not-work {
    display: none;
  }
} 
@media(min-width:768px){
  .works {
    display: block;
  }
  .works::before {
    content: 'min-width: 768px | ';
  }
  .does-not-work {
    display: none;
  }
}

<span class="works">works</span>
<span class="does-not-work">does not work</span>

Side note, based on comments: About a year ago I had the same issue with a huge website. Result of a team of 6's work of nearly two years. Bits of code pouring in from all sides. I was the one gluing front-end together, making sure it all worked. You can imagine @media queries were a mess. I only got rid of the bug by refactoring all queries using mobile first principle - I grouped all @media's using Bootstrap's exact order. Fixed it for me. To this day I don't know what caused it. It was (slightly) broken on (exactly) 768px and 992px before.

来源：https://stackoverflow.com/questions/42180675/bootstrap-layout-media-queries-not-working-at-767px-on-chrome

标签

css

twitter-bootstrap

media-queries