android - Phonegap应用位置固定菜单

Question

我正在开发一个移动应用程序，我有一个固定的页脚菜单。

<div id='footer'> 
   <ul class='menu'>
      <li>menu1</li>
       <li>menu2</li>
    </ul>   
</div>
   #footer { height:99px; background:url(../images/black2.png)repeat-x; border-top: 1px solid black; position:fixed;bottom:0;width:100%;}
    .menu { max-width:640px; margin:auto; }

我在 Android 设备上对其进行了测试。问题是，当我更改设备方向时，菜单 ul 的 margin:auto 不起作用，直到我单击另一个菜单项。谢谢!

我通过更改 CSS 解决了这个问题。

#footer { height:99px; background:url(../images/black2.png)repeat-x; border-top: 1px solid black; position:fixed;bottom:0;width:100%; text-align:center;}    
.menu {width:100%; max-width:640px; display:inline-block; }

Answer 1

我会做这样的事情:

HTML

<div class="footer"> 
<ul>
  <li>menu1</li>
  <li>menu2</li>
</ul>   
</div>

CSS

.footer { background: black; position: fixed; bottom: 0; width: 100%; text-align: center; }    
.footer ul { color: white; width: 90%; margin: 0 auto; display: block; list-style: none; }
.footer ul li { padding: .25em; display: block; }

最重要的是，我会告诉你检查 Filament Group 的“fixed-fixed”插件(这有助于移动固定定位，因为所有手机/平板电脑都不支持它): https://github.com/filamentgroup/fixed-fixed

最重要的是，我会推荐他们为移动设备构建的整个工作流程: https://github.com/filamentgroup/Southstreet/