Question

我已经创建了该功能，以便在移动设备上处理一些全屏大小调整问题。它工作得非常好但是不会多次重新计算高度值（仅在加载时计算，而不是在方向更改时计算）。我添加了警报，以证明它没有多次运行计算。任何有关允许在每个方向变化上计算此值的帮助都将非常感激。

jQuery :(仅在移动设备上运行或检查移动配置）

function resizeBackground() {
    $(".header__container").removeAttr('style');
    var fixedHeight = $(window).height();
    var bg = $(".home-carousel, .flickity-viewport, .flickity-slider, .carousel-cell, .header__container, .site-header--drawer .nav-bar");
    var softScroll = $(".soft__scroll--container");
    var squiggle = $(".squiggle__container");
    var slideNumbers = $(".slide__numbers");

    bg.height(fixedHeight);
    softScroll.css('top', fixedHeight - 50 + "px");
    slideNumbers.css('top', fixedHeight - 140 + "px");
    squiggle.css('padding-top', 10 + "px");
    console.log(fixedHeight);
}

if(isMobile.any()) {
    $(window).on("load resize", function(event) {
        resizeBackground();
    });
}

Answer 1

orientationchange timing

orientationchange事件与时间相关的时间客户height和width的更改不同浏览器，虽然当前的实现会给你正确的来自event.orientation的{{1}}的值。这个表示如果您的绑定依赖于window.orientation和height 您可能希望完全禁用width的值 orientationChange让后备 $.mobile.orientationChangeEnabled = false代码会触发您的绑定。

https://api.jquerymobile.com/orientationchange/

因此，您可能会停止收听resize或为您的功能添加timeOut。

以下代码运行正常（我添加了Firefox用户代理）：

orientationchange

$(document).ready(function() {

  var isMobile = {
    Android: function() {
      return navigator.userAgent.match(/Firefox/i);
    },
    BlackBerry: function() {
      return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
      return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
      return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
      return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
  };

  function resizeBackground() {
    var fixedHeight = $(".header__container").height();
    var bg = $(".home-carousel, .flickity-viewport, .flickity-slider, .carousel-cell, .header__container, .site-header--drawer .nav-bar");
    var softScroll = $(".soft__scroll--container");
    var squiggle = $(".squiggle__container");
    var slideNumbers = $(".slide__numbers");

    bg.height(fixedHeight);
    softScroll.css('top', fixedHeight - 50 + "px");
    slideNumbers.css('top', fixedHeight - 140 + "px");
    squiggle.css('padding-top', 10 + "px");
    alert(fixedHeight);
  }

  if (isMobile.any()) {
    $(window).on("load resize", function(event) {
      resizeBackground();
    });
  }

});

您确定您的用户代理是否匹配？

Answer 2

.header__container，orientationchange或load点击resize时，您希望$(window)更改身高。它 ... 如果它在height属性中没有设置style，则由前一次运行{ {1}}（来自resizeBackground()）。

您需要先删除此属性，以允许bg.height(fixedHeight);调整大小并为您提供正确，更新的.header__container。将其添加为.height()中的第一行，它将按预期工作：

resizeBackground()

您可以在此录音中看到该脚本正常运行：https://youtu.be/z2spumFbuRs

或者，您可能希望将$(".header__container").removeAttr('style');定义为：

fixedHeight

...这会稍微便宜一些，因为在获取标题高度之前它并不意味着DOM操作和调整大小（在移除var fixedHeight = $(window).height();之后恰好是100vh）。

最后一件事：如果你绑定style，则resize上的绑定毫无意义，因为如果没有orientationchange，orientationchange就不会发生。此外，您可能希望撤消对resize的调用，并且不允许其运行超过20次/秒。

使用jQuery重新计算值时，方向更改无效

2 个答案: