如何识别移动设备中的地址栏? window.onresize事件 window.innerHeight属性

在任何网站上向下或向上滚动时,地址栏都会显示/隐藏。我希望确定该条何时隐藏或可见。

示例:

if (chromeBarIsHidden()) {
console.log('a');
} else {
console.log('b');
}
demingdiannao1 回答:如何识别移动设备中的地址栏? window.onresize事件 window.innerHeight属性

没有确切的解决方案

在任何浏览器中都没有实现此目的的本地方法。但是,使用尺寸和窗口调整大小事件,已经开发了解决方案。 See this Stack Overflow answer。但是,除非绝对必要,否则我不建议这样做,原因如下:

  • 浏览器可能在调整了窗口大小的计算机上,导致window.onresize事件无法准确表示更改
  • 不同的移动浏览器以不同的方式处理顶部栏的隐藏。如果您确定客户端在Android Google Chrome上,则上述解决方案可能会起作用。
  • 用户可能希望网页中的UI元素在顶部应用栏被隐藏的情况下移动,从而导致整个网页的用户体验不一致

替代品

window.onresize事件

只要浏览器的窗口大小发生更改,window.onresize事件就会触发。这可以用于通过具有不同窗口大小的JavaScript来调整页面的大小并更改其布局。要使用此功能,请参见下面的示例。

window.onresize = function() {
    // Do something on resize
}

window.innerHeight属性

window.innerHeight属性返回视口的视图高度。这可用于确定是否需要根据高度更改布局安排。

var windowHeight = window.innerHeight;

响应式设计

一种更好的替代方法,它可以根据视口的大小进行更改,这在地址栏隐藏自身时会发生变化。参见this article by w3schools

本文链接:https://www.f2er.com/3100263.html

大家都在问