gpt4 book ai didi

html - 如何使
完全填充浏览器窗口,包括自 2019 年起的 Mobile Safari

转载 作者:行者123 更新时间:2023-12-03 02:38:00 24 4
gpt4 key购买 nike

我正在开发一个单页网络应用程序,该应用程序通常在移动设备上使用。它的功能之一是 map 模式,可以暂时占据整个浏览器窗口;距离比例尺和一些控件附在 map 的四个 Angular 上。这是 map 的一个小屏幕截图,以便您可以了解我在说什么:

Screenshot of map overlay

map 实现为 <div>position: fixed且所有四个坐标均为零;我也临时设置了<body>overflow: hidden而 map 是可见的,可以处理底层应用程序显示滚动远离原点的情况。这足以使 map 在桌面浏览器上完全按照我想要的方式工作。移动浏览器还要求我提供一个元视口(viewport)标签,如 "width=device-width,user-scalable=no"以使窗口的可见区域与视口(viewport)完全对应。

几年前,当我最初编写这个应用程序时,这一切都运行得很好,但在某个时候,iOS Safari 停止了任何涉及缩放的元视口(viewport)选项 - 显然有太多网站误用了标签,导致文本小得难以阅读,但无法缩放。目前,如果您在此浏览器上启用 map ,您可能会看到稍微放大的 View ,从而切断了右侧和底部的那些按钮 - 并且您对此无能为力,因为所有触摸都被解释为 map 的缩放/平移手势,而不是浏览器滚动。如果没有通过这些按钮访问的功能, map 就不是很有用 - 并且如果没有右上角的按钮,您甚至无法关闭 map 。唯一的出路是重新加载页面,这可能会导致未保存的数据丢失。

我肯定会添加 history.pushState 的使用/onpopstate以便 map 叠加层的行为就像一个单独的页面。您可以使用浏览器的“后退”按钮退出 map 模式 - 但这并不能解决由于缺少按钮而导致的其他功能损失。

我考虑过使用.requestFullscreen()来实现 map 叠加,但并非所有应用程序可用的地方都支持它。特别是,它显然在 iPhone 上根本不起作用,而在 iPad 上,你会看到一个状态栏和一个巨大的“X”按钮覆盖你的内容 - 我的距离刻度可能不再可读。无论如何,这在语义上并不是我真正想要的 - 我需要完整的窗口,而不是全屏。

如何在现代浏览器上实现全窗口显示?我能找到的有关该主题的所有信息都讨论了使用元视口(viewport)标签,但正如我提到的,它不再有效。

最佳答案

如果您使用position:fixed,只需使用已经存在多年的标准CSS方法。

.divFixedClass{
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
}

这只会使 div 自动调整为视口(viewport)的完整大小,并使用固定位置将其锁定在适当的位置,无论它们滚动多少,如果需要,您可以使用

禁用正文滚动
html.noScroll, html.noScroll > body{
overflow:none;
}

因此,如果您只是将 noScroll 类添加到 html 标记中,它将禁用滚动。然后当您想允许再次滚动时就可以了。

关于html - 如何使 <div> 完全填充浏览器窗口,包括自 2019 年起的 Mobile Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59143939/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com