在我的iPhone上,我希望在按下文本字段并显示键盘时隐藏页脚.现在它只是将自己定位在键盘上方,并且显示的网站太少.
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<div data-role="controlgroup" data-type="vertical">
<ul><li><input data-iconpos="top" data-icon='plus' type="button" value="Tur" id='nyTur' /></li>
<li><input data-iconpos="top" data-icon='plus' type="button" value="48%" id='ny48' /></li>
<li><input data-iconpos="top" data-icon='plus' type="button" value="100%" id='ny100' /></li>
</ul>
</div>
</div><!-- /navbar -->
</div><!-- /footer -->
解决方法
这是一个“正确”的难题.您可以尝试隐藏输入元素焦点上的页脚,并显示模糊,但这在iOS上并不总是可靠的.每隔一段时间(十次,例如,在我的iPhone 4S上)焦点事件似乎无法触发(或者可能是JQuery Mobile存在竞争条件),并且页脚不会被隐藏.
<head>
...varIoUs JS and CSS imports...
<script type="text/javascript">
document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
</script>
</head>
基本上：使用JavaScript确定设备的窗口高度,然后动态创建一个CSS媒体查询,以便在窗口高度缩小10个像素时隐藏页脚.因为打开键盘会调整浏览器显示的大小,所以在iOS上永远不会失败.因为它使用的是CSS引擎而不是JavaScript,所以它更快更顺畅！
注意：我发现使用’visibility：hidden’比’display：none’或’position：static’更少,但你的里程可能会有所不同.
