Chrome 开发者工具之外的 CSS 断点的死区

Question

我还是相对较新的前端设计，所以我不确定是什么原因造成的。 这是我的第三个投资组合网站，我的第二个网站也出现了问题。

当视口宽度达到 480px 时，我正在使用 jQuery 交换两个 div 的位置

HTML：

  <div id="multipleBoxesHeadliner">
                        <div id="multipleBoxesHeadlinerText"><h4>APHEX TWIN<span class="glyphicon glyphicon-asterisk"></span><br>
                                FIELD DAY 2017 HEADLINER</h4>
                        </div>
                        <p>28/11/2016</p>  
  </div>
  <div id="multipleBoxesHeadlinerPic"></div>

CSS：

      .multipleBoxes .multipleBoxesRow #multipleBoxesHeadliner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 35vh;
    background-color: white;
    -ms-flex-item-align: end;
    align-self: flex-end;
    position: relative;
    -ms-flex-preferred-size: 24%;
    flex-basis: 24%; }
    .multipleBoxes .multipleBoxesRow #multipleBoxesHeadliner #multipleBoxesHeadlinerText {
      height: 30vh; }
    .multipleBoxes .multipleBoxesRow #multipleBoxesHeadliner p {
      position: absolute;
      left: 0;
      bottom: 0; }
  .multipleBoxes .multipleBoxesRow #multipleBoxesHeadlinerPic {
    height: 35vh;
    -ms-flex-preferred-size: 24%;
    flex-basis: 24%;
    -ms-flex-item-align: end;
    align-self: flex-end;
    margin-right: 1%;
    background-image: url(../images/headlinerPic.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; }

CSS 媒体查询：

    @media screen and (max-width: 480px) {
  .multipleBoxes .multipleBoxesRow #multipleBoxesHeadliner {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    margin: 0% 12% 1% 12%; }
  .multipleBoxes .multipleBoxesRow #multipleBoxesHeadlinerPic {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    margin: 1% 12% 0% 12%; } }

jQuery:

    //Swap positions of two divs on window resize
    $(window).resize(function(){
        if($(window).width() <= 480){
            $("#multipleBoxesHeadliner").insertAfter("#multipleBoxesHeadlinerPic");   
        }
        else if($(window).width() >= 480){
            $("#multipleBoxesHeadlinerPic").insertAfter("#multipleBoxesHeadliner");
        }
    });

这里有两个显示正在发生的事情的 gif：

使用 Chrome 开发者工具：

在常规浏览器窗口中不起作用：

有人知道是什么原因造成的吗？ 发生在所有浏览器中。

使用的语言/工具：HTML/CSS/Javascript/jQuery/Bootstrap/SASS

Answer 1

滚动条。 window.width 考虑可见元素的宽度，包括滚动条，而 CSS 媒体查询将它们排除在外。

改用innerwidth

$(window).resize(function(){
    if($('body').innerWidth() <= 480){
        $("#multipleBoxesHeadliner").insertAfter("#multipleBoxesHeadlinerPic");   
    }
    else if($('body').innerWidth() >= 480){
        $("#multipleBoxesHeadlinerPic").insertAfter("#multipleBoxesHeadliner");
    }
});

请记住，innerWidth 仅适用于 body 元素，如果您需要知道其他元素的内部宽度（例如，某些带有内部溢出滚动条的元素），您可以使用 .prop("clientWidth") 和 .prop("scrollWidth") 代替