相关疑难解决方法(0)
iPad Web App:在Safari中使用JavaScript检测虚拟键盘？
我正在为iPad编写一个Web应用程序(不是常规App Store应用程序 - 它是使用HTML,CSS和JavaScript编写的).由于键盘填满了屏幕的大部分,因此在显示键盘时更改应用程序的布局以适应剩余空间是有意义的.但是,我发现无法检测键盘何时或是否显示.
我的第一个想法是假设当文本字段具有焦点时键盘可见.但是,当外接键盘连接到iPad时,当文本字段获得焦点时,虚拟键盘不会显示.
在我的实验中,键盘也没有影响任何DOM元素的高度或滚动高度,我没有发现任何专有事件或属性来指示键盘是否可见.
推荐指数
解决办法
查看次数
当固定元素获得焦点时,ios8中的Safari是滚动屏幕
在IOS8 Safari中,有一个新的位置修复错误.
如果您聚焦固定面板中的文本区域,Safari会将您滚动到页面底部.
这使得所有类型的UI都无法使用,因为您无法将文本输入textareas而无需将页面一直向下滚动并丢失位置.
有没有办法干净地解决这个bug？
#a {
height: 10000px;
background: linear-gradient(red, blue);
}
#b {
position: fixed;
bottom: 20px;
left: 10%;
width: 100%;
height: 300px;
}
textarea {
width: 80%;
height: 300px;
}
<html>
<body>
<div id="a"></div>
<div id="b"><textarea></textarea></div>
</body>
</html>
推荐指数
解决办法
查看次数
修复了持久性标题并滚动到焦点输入字段
问题:基于iOS7 Safari中主屏幕Web应用程序的给定示例,如何实现永不滚动出视图的固定持久标头,以及在敲击时滚动到视图中的输入字段？
这两个示例有一个区别,一个height=device-height在视口中,另一个没有.
没有设备高度
<meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1" />
演示:http://run.plnkr.co/plunks/SU8Csk/
编辑链接:http://plnkr.co/edit/SU8Csk
好处:固定标题在点击字段时不会改变位置/高度.
坏处:用户无法在不手动滚动或按下"下一步"按钮的情况下看不到聚焦的字段.这可能非常繁琐,尤其是如果字段位于不溢出的页面上.
设备高度
<meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1" />
演示:http://run.plnkr.co/plunks/rPoyaB/
编辑链接:http://plnkr.co/edit/rPoyaB
好处:用户根据需要滚动到焦点字段.
坏处:固定标题完全滚出视图,这需要始终保持在屏幕上.场景是,它将包含一个取消按钮和一个始终可以访问的保存按钮.此外,当字段模糊时,标题本身看起来被压扁,直到用户将其向下滚动到视图中,但如果禁用溢出,则它们甚至无法执行此操作.
丑陋的:在我的非平凡的真实代码中,远离这些简化的例子,有一堆元素绝对位于标题内以创建曲线"标签"效果,这些元素的对齐完全关闭.
您应该能够在iOS7 Safari中打开每个演示URL,添加到主屏幕,然后启动以演示该问题.
解决这个问题的最佳方法是什么？
注意:我知道iOS7 Safari中存在"错误",特别是涉及到主屏幕Web应用程序时,但我相信可能存在与我如何构建页面相关的解决方法.我做了大量的研究(见下文),但我很难找到解决方案.
"固定标题"问题的相关链接: ios7 +中需要固定标题,如何获得固定标题以保持在页面顶部？, 修复了移动safari网站上的文本字段标题, iOS 5固定定位和虚拟键盘, ipad/iphone上固定页眉,页脚和侧栏的问题, CSS"位置:固定;" 在iPad/iPhone上？, 固定在Mobile Safari中的定位,当在Mobile Safari中打开虚拟键盘时, 如何阻止我的固定导航像这样移动？, web应用程序 - 设备高度/键盘问题 …
推荐指数
解决办法
查看次数
如何阻止手机游戏设置从输入焦点的固定位置设置为绝对位置？
免责声明 - 我理解在safari中存在固定元素的问题,并且不支持固定元素,但现在等等.但是,我无法找到解决这个问题的问题.
鉴于最简单的固定侧边栏,例如:
.sidebar {
position: fixed;
top: 10px;
right: 10px;
}
和一个相对较长的页面,带有输入元素.
当一个输入元素被聚焦时,任何固定的元素都变成绝对的 - 我理解为什么,safari试图对视口进行整理 - 这很好,但并不总是合适的.我要求我为用户选择最好的体验(我最清楚自然).
所以问题..
即使输入元素被聚焦,有没有办法将固定元素保留为固定元素？
我试图$(window).on('scroll',在滚动时手动做一些魔法和位置元素,但它在ipad上非常紧张.
推荐指数
解决办法
查看次数