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")代替