Question

我的Bootstrap（v3.3.5）布局css只有一个Chrome浏览器问题，正好是767px，其中布局样式没有被应用。

以下是在3个浏览器上试验控制台后的行为......

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)

我的所有媒体查询都已创建如下......

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

我已经尝试更改这些值，因此存在重叠（例如，最小宽度为767px），但它没有效果。

道歉，如果这有点模糊，但我真的不知道从哪里开始调查问题，并且只发现了一个与之前版本的bootstrap（https://github.com/twbs/bootstrap/issues/1531）类似行为的报告。

有人知道我在Chrome上看到此内容的任何可能原因吗？无论哪种方式，任何关于适当调查方式的建议都将非常受欢迎。

- 编辑 - 经过数小时的研究，我测试了这个简单的文件......

<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。当然我无法通过上传到小提琴/代码集来复制这个 - 所以它必须与我在localhost（通过MAMP）上运行的事实有关。绝对零的想法为什么会这样，但至少它似乎不会影响我在现场环境中

Answer 1

制作此全屏并调整窗口大小。它在Chrome中适用于我，并且在它们之间没有显示“不起作用”。

.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查询是一团糟。我只是通过使用移动优先原则重构所有查询来消除错误 - 我使用Bootstrap's exact order对所有@media进行了分组。为我修好了。直到今天，我不知道是什么造成的。之前（确切地说）768px和992px（稍微）被打破了。

Answer 2

Chrome（对于我而言，Win10 上的版本为 89.0.4389.82）似乎可以使用一小部分像素。因此，将所有较低的断点阈值增加 .9px 为我解决了这个问题。所以例如

max-width :767px 需要变成 max-width :767.9px

Bootstrap布局媒体查询无法在Chrome上以767px运行

2 个答案: