jQuery Mobile-Phonegap：Windows 8 横向模式下的页脚对齐问题

Posted 2023-03-21

【中文标题】jQuery Mobile-Phonegap：Windows 8 横向模式下的页脚对齐问题

【英文标题】：jQueryMobile-Phonegap : Footer alignment issue in Windows8 Landscape mode

【发布时间】：2014-06-14 22:12:45

【问题描述】：

我一直在使用 固定页脚 的 phonegap 包装一个 jQueryMobile 应用程序。

在 windows8 手机中，将方向更改为横向模式时，固定页脚在仅横向模式中未正确对齐。页脚似乎在横向模式下具有类似于底部填充的行为。在纵向模式下，它可以完美对齐。

我正在使用 jquery.mobile-1.3.2 和 Phonegap 2.7.0。

我一直在尝试以下 URL 中提到的修复，但没有帮助：

https://forum.jquery.com/topic/jquery-mobile-fixed-footer-not-at-the-bottom-on-windows-phone-7-and-8

***.com/questions/16602585/jquery-mobile-position-fixed-in-windows-phone-8-and-viewport-height

gilesey.wordpress.com/2013/08/15/jquerymobilephonegap-hintshacks-for-windows-phone-8-0iosandroid/

还尝试了一些 JS、jQM 和 CSS 技巧，但不影响页脚的更改。

横向模式下的页面截图如下链接所示（可以看到黑色的页脚，甚至页脚文本都看不清楚）：

http://goo.gl/8RICNG

为更清楚起见，将部分标题部分粘贴在下面：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />

我的应用页脚代码是：

<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-hide-during-focus="" class="footer-cls">

    <div align="center" class="footer-txt"><script>document.write(footerText);</script></div>
</div>

当我遇到这个问题时，谁能帮我解决一个完美的问题？

提前谢谢..

【问题讨论】：

在 windows phone 中它不支持 jquery mobile 所以当你滚动它时它总是隐藏..

问题是在将设备方向从纵向更改为横向时，而不是在滚动时。谢谢..

data-position="fixed" 在 Windows phone 8 中不起作用，而是使用 CSS 来定位 dom -> position:absolute;bottom:0;

【参考方案1】：

在 Mainpage.xaml 中尝试更改属性

shell:SystemTray.IsVisible="True"

到

shell:SystemTray.IsVisible="False"

这将使应用程序以全屏模式呈现，并将您的 CSS 重置为整个页面。这可能会解决您的问题

【讨论】：

感谢您的回复。这个修复效果很好！ .非常感谢。