Mobile Webkit：在所有情况下都能可靠地检测可视区域？
简短版本： 在我的移动网络应用程序中，我希望始终检测屏幕的可视区域（例如，软键盘顶部（如果有）和标题栏底部之间的空间），这样我就可以调整我的布局，无需缩放，并使页面始终在屏幕上完全可见。有什么可靠的方法可以做到这一点吗？
更长的版本： 在应用程序中，我捕获所有触摸事件并自己控制平移和缩放。控制栏固定在屏幕的顶部和底部，始终可见。我的 veiwport 设置是：
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=no">
我的愿望是始终使页面布局适应浏览器窗口的可视区域，因此屏幕上不会出现任何内容。因此，当键盘出现或消失时，或者方向发生变化时，我需要检测宽度和高度并相应地重新布局。
如果没有屏幕键盘，window.innerWidth和window.innerHeight就足够了。然而，当键盘出现时，事情就变得古怪了（仅在某些严格控制的条件下才有效）。但愿键盘抬起时不会发生方向变化。
DOM 中有什么东西可以告诉我我想要什么吗？我真的更愿意动态地解决这个问题，而不是将界面元素的大小硬连接到我的代码中，但如果没有其他方法，我会采用这种方法。
抱歉啰嗦了，很难捕捉到我所经历的所有怪异现象。我的测试主要在运行 3.2 的 iPad 和运行 4.1 的 iPhone 上进行；两者的行为始终不一致。
Short version:
In my mobile web app I want to always detect the viewable area of the screen (e.g., the space between the top of the soft keyboard (if present) and the bottom of the titlebar), so I can adjust my layout, without zooming, and keep the page completely visible on-screen at all times. Is there any reliable way to do this?
Longer version:
In the app I'm grabbing all touch events and controlling panning and zooming myself. Control bars are fixed at top and bottom of the screen, always visible. My veiwport settings are:
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=no">
My wish is to always adapt my page layout to the viewable area of the browser window, so nothing is ever off-screen. So, when the keyboard appears or disappears, or when orientation changes, I need to detect the width and height and re-layout accordingly.
If not for the on-screen keyboard, window.innerWidth and window.innerHeight would suffice. When the keyboard appears, though, things get wacky (works only under certain tightly controlled conditions). And heaven forbid there's an orientation change while the keyboard is up.
Is there anything in the DOM that can tell me what I want? I really would prefer to figure this out dynamically rather than hardwire the size of the interface elements into my code, but I'll resort to that if there's no other way.
Sorry for the verbosity, it's hard to capture all the weirdness I've been experiencing. My testing has been predominantly on an iPad running 3.2 and an iPhone running 4.1; behavior has been consistently inconsistent across both.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
与您所追求的最接近的可能是 screen.availHeight，它显示屏幕减去标题栏的高度。但是，当您调出屏幕键盘或旋转屏幕时，即使使用
window.onresize事件，这种情况也不会改变。恐怕我想不出什么办法来考虑这一点。The closest thing to what you're after is probably
screen.availHeightwhich shows the height of the screen minus the title bar. This doesn't change when you bring up the on-screen keyboard or rotate the screen, however, even using thewindow.onresizeevent. I can't think of a way to take account of that I'm afraid.