个人中心
gpt4 book ai didi

javascript - 元素上的 jQuery .outerHeight() 在方向更改时返回不正确的大小

转载 作者：行者123 更新时间：2023-12-04 15:24:54 26 4
gpt4 key购买 nike

我正在尝试获取我网站上顶部导航栏的 outerHeight 以进行一些计算，它在加载/重新加载网页时完美运行。但是，当我将 Chrome 开发人员工具中的屏幕方向更改为横向时，它会返回错误的高度。我的代码在获取 outerHeight 之前监听调整大小更改事件，所以我不确定为什么它在网页方向更改时返回错误的高度，但在加载/重新加载网页时返回正确的高度。我认为这可能与 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>

最佳答案

  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

  2. 您可以添加特殊的 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>

关于javascript - 元素上的 jQuery .outerHeight() 在方向更改时返回不正确的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62478348/

26 4 0
文章推荐： Java Flux 与 Observable/BehaviorSubject
文章推荐： python - Python 中的方法与函数值字段
文章推荐： reactjs - React - 状态数组删除数组中的最后一项而不是指定的索引
文章推荐： mysql - 如何在 MySQL 5 .7 中实现 CTE 功能？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com