css - 如何让媒体查询识别横向？

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