如何使 <div> 完全填充浏览器窗口，包括截至 2019 年的 Mobile Safari
jas*_*per 12 html css fullscreen mobile-safari
我正在开发一个单页网络应用程序，它最常用于移动设备。它的功能之一是地图模式，可以暂时接管整个浏览器窗口；距离比例尺和一些控件附在地图的四个角上。这是地图的一个小截图，所以你可以知道我在说什么：
地图被实现为一个<div>，position: fixed并且所有四个坐标为零；我还在地图可见时临时将 设置为<body>，overflow: hidden以处理底层应用程序显示从原点滚动的情况。这足以使地图在桌面浏览器上完全按照我想要的方式工作。移动浏览器还要求我提供一个类似的元视口标签，"width=device-width,user-scalable=no"以使窗口的可见区域与视口完全对应。
这所有的工作精美几年前，当我最初写这个程序，但沿线的iOS Safari浏览器停止接受任何涉及缩放元视口选项的地方-显然太多的网站被误用的标签，导致文本是unreadably小，但不可缩放。目前，如果您在此浏览器上启用地图，您可能会看到一个稍微放大的视图，这会切断右侧和底部的那些按钮 - 而您对此无能为力，因为所有触摸都被解释为地图的缩放/平移手势，而不是浏览器滚动。如果没有通过这些按钮访问的功能，地图就不会非常有用 - 如果没有右上角的按钮，您甚至无法关闭地图。唯一的出路是重新加载页面，这可能会导致未保存的数据丢失。
我肯定会添加history.pushState/的使用，onpopstate以便地图叠加层表现得像一个单独的页面。您可以使用浏览器的后退按钮退出地图模式 - 但这并不能解决由于缺少按钮而导致的其余功能损失。
我已经考虑使用.requestFullscreen()来实现地图覆盖，但并非所有地方都支持该应用程序本来可以使用。特别是，它显然在 iPhone 上根本不起作用，而在 iPad 上，您会看到一个状态栏和一个覆盖您内容的巨大“X”按钮——我的距离刻度可能不再可读了。无论如何，这在语义上并不是我真正想要的 - 我需要 full window，而不是全屏。
如何在现代浏览器上获得全窗口显示？我能找到的关于这个主题的所有信息都在谈论使用元视口标签，但正如我提到的那样不再有效。
解决方案
使用 JavaScript设置全屏 div 的高度window.innerHeight，然后在窗口大小调整时更新它。
同样的问题在这里：
更多信息：
- https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
- https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
| 归档时间： |
|
| 查看次数： |
3238 次 |
| 最近记录： |