如何确定 Mobile Safari 中 iOS 键盘的尺寸
我目前正在尝试在针对 Mobile Safari 的网页中创建建议 UI。主要组件是一个文本框和一个滚动列表,该列表显示在包含建议列表的文本框下方。
为此,我需要 1) 确定键盘已显示,2) 确定键盘的大小,以便调整建议列表的大小以适应可用空间。
我已经能够通过等待焦点事件来完成(1),但是(2)仍然有问题。我无法找到任何方法来测量键盘的尺寸,因为它似乎不会影响窗口尺寸或我能想到的任何其他东西来测量。
无论如何,有没有办法以编程方式确定 iOS 键盘在移动 safari 中显示时的大小?
I'm currently trying to create a suggestion UI in a web page targeted at Mobile Safari. The main components are a text box and a scrolling list that is displayed below the textbox that contains the list of suggestions.
To do this I need to 1) determine that the keyboard has shown and 2) determine the size of this in order to resize the suggestion list to fit in the available space.
I've been able to accomplish (1) by waiting for the focus event, but (2) is still problematic. I have not been able to find any way to measure the size of the keyboard as it doesn't seem to impact the window dimensions or anything else that I could think of trying to measure.
Is there anyway to programically determine the size of the iOS keyboard when it is displayed in mobile safari?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
不幸的是,没有办法计算键盘的高度。当键盘出现时,窗口属性不会改变。
要确定键盘是否显示,您可以使用以下解决方案:
iPad Web 应用程序:在 Safari 中使用 JavaScript 检测虚拟键盘?
然后,您需要添加特定于设备的类,并在 CSS 中使用媒体查询以及这些类,以针对设备和方向设置适当的样式。
如果有人有更好的技巧,我真的很想听听。
Unfortunately, there is no way to calculate the height of the keyboard. None of the window properties change when the keyboard comes up.
To determine that the keyboard is showing, you can use this solution:
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?
Then you'll need to add a device specific class and use media queries in your CSS along with these classes to style appropriately for device and orientation.
If someone has a better hack, I'd really love to hear about it.