个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
在我的 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”的故障更少，但您的情况可能会有所不同。
关于jquery mobile 在键盘时隐藏固定页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20069352/
24
4
0
我是一名优秀的程序员,十分优秀！