三星 Galaxy S7 向视口高度分配正确值的速度很慢？

Question

加载页面时，要检查是否使用横向或纵向方向的样式，我们使用视口宽度和高度：

var viewPortWidth = $(window).width();
var viewPortHeight = $(window).height();

if(viewPortWidth > viewPortHeight)
{
// Landscape style
}

除了 Samsung Galaxy S7 之外，所有手机都运行良好，初始加载时高度值不正确。

---

在 Samsung Galaxy S7 中，当页面以 纵向 方向加载时，我将这些值打印到控制台：

$(window).width();

returns 330

$(window).height(); 

returns 310 - 不正确

---

然后，当页面完全加载后，我再次在控制台中查询这些值，这次：

$(window).width(); 

returns 330

$(window).height();

returns 520 - 正确

---

• 当我刷新页面时，它按预期工作 - 仅在初始阶段 加载，当从另一个页面导航到这个页面时，$(window).height() 没有正确的值。
• 这只是开发和测试环境的问题，不是 生产问题。
• 这只会发生在某些页面上，而不会发生在其他页面上。

将正确的值分配给 $(window).height() 似乎需要大约 150 毫秒，所以我暂时将分配样式的函数延迟了 150 毫秒。

我想知道这是否是 Samsung Galaxy S7 特有的问题。以前有人遇到过这个问题吗？如果遇到过，您是如何解决的？

Answer 1

这是由 Android 上的软键盘引起的。当键盘打开时，值 $(window).height(); 变为（之前的 window 高度 - 键盘高度）。

我会在搜索栏中输入内容并按回车键，然后当搜索结果页面正在加载时，上一页的软键盘在我的样式检查开始的前 x 毫秒内仍未收回完成。

通过使用 window.orientation 中的值检查 Android 设备是纵向模式还是横向模式解决了这个问题，而不是仅仅依赖于 [=12= 中的值的比较] 和 $(window).height();