jQuery 元素上的 .outerHeight() returns 方向改变时尺寸不正确

Question

我正在尝试获取我网站上顶部导航栏的 outerHeight 以进行一些计算，当 loading/reloading 网页时它可以完美运行。但是，当我在 Chrome 开发人员工具中将屏幕方向更改为横向时，returns 高度错误。我的代码在获取 outerHeight 之前侦听调整大小更改事件，所以我不确定为什么它在网页方向更改时返回错误的高度，但在 loading/reloading 网页时返回正确的高度。我认为这可能与 resize 侦听器在方向更改后不等待页面完全加载有关，但我不确定。

对于代码片段，我尝试向其中添加 Bootstrap 4.5，但它一直返回错误。如果有人想在知道该怎么做的人中添加它，那将不胜感激，这样当运行代码片段时页面会更准确。

body {
  background-position: center center;
  background-size: auto;
  position: absolute;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  color: white;
}

a {
  color: white;
}

a:hover {
  text-decoration: none;
  color: white;
}

#content-wrapper {
  overflow-y: scroll;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

#content-wrapper::-webkit-scrollbar {
  display: none;
}

#top_navbar {
  padding: 0;
}

.navbar-brand {
  padding: 0;
}

#navbar_logo {
  width: 15vw;
  margin-right: 6vw;
  margin-left: 0 !important;
}

.nav-link {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vw;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #1b1b1b;
  letter-spacing: 1px;
}

.nav-link:hover {
  -webkit-text-fill-color: #1b1b1b;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}

.nav-item {
  margin-left: 3vw;
  margin-right: 3vw;
}

#bottom_footer,
#legal_documents {
  background-color: #1b1b1b;
  width: 100%;
  position: absolute;
  display: table;
  bottom: 0;
  text-align: center;
  padding-top: 1%;
  padding-bottom: .4%;
}

#legal_documents {
  bottom: unset;
  font-size: 10px;
  padding-bottom: .6% !important;
}

#social_buttons::selection {
  color: none;
  background: none;
}

#social_buttons::-moz-selection {
  color: none;
  background: none;
}

#social_buttons a {
  display: inline-block;
  margin: 0 15px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

#bottom_footer a:hover,
#legal_documents a:hover {
  opacity: 0.5;
}

<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, shrink-to-fit=no">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
  <nav id="top_navbar" class="navbar navbar-expand-sm navbar-dark">
    <a class="navbar-brand" href="" title="Melo Relo">
      <img id="navbar_logo" src="">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_items" aria-controls="navbar_items" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbar_items">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
      </ul>
    </div>
  </nav>

  <main id="content-wrapper" class="container-fluid">
  </main>

  <div id="bottom_footer">
    <div id="social_buttons">
      <a href="" class="facebook" title="Facebook" target="_blank"></a>
      <a href="" class="twitter" title="Twitter" target="_blank"></a>
      <a href="" class="instagram" title="Instagram" target="_blank"></a>
      <a href="" class="snapchat" title="Snapchat" target="_blank"></a>
      <a href="" class="youtube" title="YouTube" target="_blank"></a>
    </div>
    <div id="legal_documents">
      <a href="" title="Privacy Policy" target="_blank">PRIVACY POLICY</a> |
      <a href="" title="Terms and Conditions" target="_blank">TERMS AND CONDITIONS</a>
    </div>
  </div>
</body>

</html>

Answer 1

将 <meta name="viewport" content="width=device-width, initial-scale=1"> 添加到您的 <head> 标签。这将有助于根据设备宽度以正确的 CSS 比例浏览您的网站。更多信息请点击这里 https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
您可以添加特殊的 window.addEventListener("orientationchange", function() { ... }); 侦听器。这个名字说明了一切。更多信息请点击这里 https://developer.mozilla.org/en-US/docs/Web/API/Window/orientationchange_event

$(window).on('resize', function() {
  window_width = $(window).width() + (window.innerWidth - document.documentElement.clientWidth);
  resizeContainer(window_width);
});

window.addEventListener("orientationchange", function() {
  window_width = $(window).width() + (window.innerWidth - document.documentElement.clientWidth);
  resizeContainer(window_width);
});

function resizeContainer(window_width) {
  let container_height;
  let navbar_height;
  let window_height = $(window).height();
  let footer_height = $("#bottom_footer").innerHeight();

  if (window_width <= 575) {
    navbar_height = $("#top_navbar").outerHeight(true) + 10;
    $('#content-wrapper').css("margin-top", navbar_height);
    $("#navbar_logo").attr("src", "/static/images/title-logo-mobile.jpg");
    $("#navbar_logo").css({
      "width": "28vw",
      "margin-left": "0"
    });
  } else {
    navbar_height = $("#top_navbar").outerHeight(true);
    console.log(navbar_height);
    $('#content-wrapper').css("margin-top", 0);
    $("#navbar_logo").attr("src", "/static/images/title-logo.jpg");
    $("#navbar_logo").css({
      "width": "15vw",
      "margin-left": "3vw"
    });
  }

  container_height = window_height - navbar_height - footer_height;
  $("#content-wrapper").css("height", container_height);
}

body {
  background-position: center center;
  background-size: auto;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  color: white;
}

a {
  color: white;
}

a:hover {
  text-decoration: none;
  color: white;
}

#content-wrapper {
  overflow-y: scroll;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

#content-wrapper::-webkit-scrollbar {
  display: none;
}

#top_navbar {
  padding: 0;
}

.navbar-brand {
  padding: 0;
}

#navbar_logo {
  width: 15vw;
  margin-right: 6vw;
  margin-left: 0 !important;
}

.nav-link {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vw;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #1b1b1b;
  letter-spacing: 1px;
}

.nav-link:hover {
  -webkit-text-fill-color: #1b1b1b;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}

.nav-item {
  margin-left: 3vw;
  margin-right: 3vw;
}

#bottom_footer,
#legal_documents {
  background-color: #1b1b1b;
  width: 100%;
  position: fixed;
  display: table;
  bottom: 0;
  text-align: center;
  padding-top: 1%;
  padding-bottom: .4%;
}

#legal_documents {
  bottom: unset;
  font-size: 10px;
  padding-bottom: .6% !important;
}

#social_buttons::selection {
  color: none;
  background: none;
}

#social_buttons::-moz-selection {
  color: none;
  background: none;
}

#social_buttons a {
  display: inline-block;
  margin: 0 15px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

#bottom_footer a:hover,
#legal_documents a:hover {
  opacity: 0.5;
}

<html lang="en">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <nav id="top_navbar" class="navbar navbar-expand-sm navbar-dark">
    <a class="navbar-brand" href="" title="Melo Relo">
      <img id="navbar_logo" src="/static/images/title-logo.jpg">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_items" aria-controls="navbar_items" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar_items">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">LABEL</a>
        </li>
      </ul>
    </div>
  </nav>

  <main id="content-wrapper" class="container-fluid">
  </main>

  <div id="bottom_footer">
    <div id="social_buttons">
      <a href="" class="facebook" title="Facebook" target="_blank"></a>
      <a href="" class="twitter" title="Twitter" target="_blank"></a>
      <a href="" class="instagram" title="Instagram" target="_blank"></a>
      <a href="" class="snapchat" title="Snapchat" target="_blank"></a>
      <a href="" class="youtube" title="YouTube" target="_blank"></a>
    </div>
    <div id="legal_documents">
      <a href="" title="Privacy Policy" target="_blank">PRIVACY POLICY</a> |
      <a href="" title="Terms and Conditions" target="_blank">TERMS AND CONDITIONS</a>
    </div>
  </div>


</body>

</html>

Answer 2

我想通了这个问题。 jQuery 高度方法在将屏幕方向更改为横向时返回错误高度计算的原因是顶部导航栏进行了某些更改，并且这些更改是在获取顶部导航栏高度之后进行的。这些更改应该在获得顶部导航栏高度之前进行。对顶部导航栏所做的更改包括 #navbar-logo 的大小和实际图像以及将 #content-wrapper's margin-top 设置为 0。交换代码并等待图像加载后，正确的高度是返回每个方向变化。

  if (window_width <= 575) {
    $("#navbar_logo").attr("src", "/static/images/title-logo-mobile.jpg");
  } else {
    $("#navbar_logo").attr("src", "/static/images/title-logo.jpg");
  }

  $("#navbar_logo").on("load", function() {
    if (window_width <= 575) {
      $("#navbar_logo").css({"width":"28vw", "margin-left":"0"});
      navbar_height = $("#top_navbar").outerHeight(true) + 10;
      $('#content-wrapper').css("margin-top", navbar_height);
    } else {
      $("#navbar_logo").css({"width":"15vw", "margin-left":"3vw"});
      navbar_height = $("#top_navbar").outerHeight(true);
      $('#content-wrapper').css("margin-top", 0);
    }
    container_height = window_height - navbar_height - footer_height;
    $("#content-wrapper").css("height", container_height);
  });

jQuery 元素上的 .outerHeight() returns 方向改变时尺寸不正确

jQuery .outerHeight() on an element returns incorrect size on orientation change

javascript

jquery

screen-orientation

orientation-changes

outerheight