【问题标题】:Android Chrome hides address bar after exiting fullscreen with javascript after rotating screen (bug?)Android Chrome 在旋转屏幕后使用 javascript 退出全屏后隐藏地址栏(错误?)
【发布时间】:2020-09-10 16:13:26
【问题描述】:

我正在使用这个 javascript 使网站全屏并退出全屏:

function ToggleFullscreen() {
  elem = document.documentElement;
  if (!document.fullscreenElement && !document.mozFullScreenElement &&
    !document.webkitFullscreenElement && !document.msFullscreenElement) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }      
  }  
}

问题是,如果用户在您退出全屏浏览期间将手机从横向旋转到纵向,则地址栏不会重新出现。这似乎是一个错误,因为如果他们之前没有旋转设备,它可以完美地工作。为了取回它,用户通常可以在页面上向上滚动。但是,我目前正在制作的网站上的内容要求禁用滚动,因此用户无法这样做。所以对他们来说,网站似乎已经搞砸了,地址栏丢失了。

任何人都可以想办法找回地址栏吗?我尝试使用“scrollTop = 0”,但没有帮助。我什至尝试了“scrollTop = 20”,然后在延迟“scrollTop = 0”之后仍然没有好处。确实让它回来的一件事是使用“alert('message');”。正如您可以想象的那样,我不想每次有人退出全屏时都弹出一条消息,尽管只是以防万一他们处于这种状态。是否有任何其他 javascript 函数可能会像警报一样将地址栏带回来?或者我可以首先尝试避免这个问题吗?

【问题讨论】:

    标签: javascript google-chrome fullscreen


    【解决方案1】:

    我找到的唯一解决方案是在屏幕旋转后延迟后退出全屏模式:

    screen.orientation.addEventListener('change', () => {
      if (screen.orientation.type.startsWith('landscape')) {
        document.documentElement.requestFullscreen();
      }
      else if (document.fullscreen) {
        setTimeout(() => document.exitFullscreen(), 500);
      }
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-10-21
      相关资源
      最近更新 更多