Bootstrap布局媒体查询在Chrome上无法以767px运行 [英] Bootstrap layout media queries not working at 767px on Chrome
问题描述
我的Bootstrap(v3.3.5)布局css恰好在767px处出现了纯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.
这是在3种浏览器上尝试过控制台之后的行为...
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*/
}
我已经尝试过更改这些值，因此会有重叠(例如，最小宽度为767px)，但没有任何效果.
I've experimented changing these values so there's an overlap (e.g. a min-width of 767px) but it has no effect.
抱歉，这有点含糊，但是我真的不知道从哪里开始调查问题，并且从先前版本的bootstrap(
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).
有人知道我可能仅在Chrome上看到此消息的任何可能原因吗?无论哪种方式，都将对采用适当调查方法的任何建议表示赞赏.
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>
仅在Chrome上-767px的文本既不是绿色也不是红色-黑色，Times New Roman，并且比10px大得多.当然，我无法通过上传到小提琴/codepen来复制它-因此，这一定与我在本地主机上运行(通过MAMP)有关.绝对为零的想法为什么会这样，但至少在实际环境中似乎不会影响到我
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
推荐答案
使此全屏显示并调整窗口大小.它在Chrome浏览器中对我有效，并且在两者之间没有不起作用"的显示.
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>
基于注释的旁注:大约一年前，我在一个大型网站上遇到了同样的问题.一个由6人组成的团队近两年的工作成果.大量的代码从各个方面涌入.我是一起粘接前端的人，请确保一切正常.您可以想象@media查询是一团糟.我仅通过使用移动优先原则重构所有查询来摆脱该错误-我使用
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.
这篇关于Bootstrap布局媒体查询在Chrome上无法以767px运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
