Question

我有一个固定页脚的JQM应用程序。为了解决键盘显示时的渲染问题，我发现了一些CSS3媒体查询，如果屏幕的最小高度超过一定数量，则会将.ui-footer-fixed类的可见性设置为可见基于方向的像素。

正确检测纵向模式屏幕尺寸和方向，并在显示和隐藏键盘时显示/隐藏类别。但是，在横向模式下，未检测到横向方向，隐藏的默认可见性将接管。

这是设置这些媒体查询的相关脚本：

var win = $(window),
    height = win.height(),
    width = win.width();

document.write([
    "<style>",
    ".ui-footer-fixed { visibility: hidden; }",
    "@media screen and (orientation: portrait) and (min-height: " + (Math.max(width, height) - 10) + "px)",
    "{ .ui-footer-fixed { visibility: visible; }",
    "@media screen and (orientation: landscape) and (min-height: " + (Math.min(width, height) - 30) + "px)",
    "{ .ui-footer-fixed { visibility: visible; }",
    "</style>"
].join(" "));

我做错了什么？

谢谢，马修

Answer 1

答案在于我尝试的原始解决方案，但是两个@media查询中缺少一些结束的花括号。

解决方案来自这篇SO帖子：jquery-mobile-hide-fixed-footer-when-keyboard

Answer 2

回答如何让媒体查询识别横向方向的问题？

@media screen and (orientation:landscape)
{
   body
   {
      background: red;
   }
}

如何获取媒体查询以识别横向？

2 个答案: