2

我正在使用 phonegap 构建 android 应用程序。我现在面临的问题是，当我在列表视图中向下滚动时，底部的标签图标边框变得粗糙和恶化。有人可以帮我弄清楚为什么会发生这种情况以及如何解决它吗？我正在使用 css 添加所有图像。

更新

这是我的代码

css

footer {
position:fixed;
width: 100%;
height: 60px;
bottom:0; 
left:0;
padding: 0;
line-height: 100px;
z-index:2;
background: url(../../assets/img/tabbg.png) repeat-x;
}
footer ul {
list-style-type: none;
margin: 0; padding: 0;
text-align: center;
}
footer ul li {
display: block;
float: left;
width: 33%; line-height: 50px;
margin-right: 0.5%;
height: 58px;
text-align: center;
overflow: hidden;
}
footer ul li.one { 
margin-left: 0.5%; 
}
footer ul li a {
display: block;
text-decoration: none;
margin: 1px;
height: 100%; width: 100%;
}
footer ul li a.home { 
background: url(../../assets/img/home3.png) center no-repeat; 
}
footer ul li a.profile { 
background: url(../../assets/img/camera2.png) center no-repeat; 
}
footer ul li a.cam { 
background: url(../../assets/img/profile2.png) center no-repeat; 
}

这是我的标签页

<footer>
    <ul>
        <li class="one"><a href="#" rel="home" class="home tabs"></a></li>
        <li><a href="#" rel="camera" class="profile tabs"></a></li>
        <li><a href="#" rel="profile" class="cam tabs"></a></li>
    </ul>
</footer>
4

2 回答 2

1

如果没有确切地看到您遇到的问题，很难知道是否是这样，但是我在将我在 PhoneGap 中为 iPhone 构建的应用程序移植到 Android 时遇到问题（仍在使用 PhoneGap）。

我发现使用 position Fixed 会导致问题，并且我在使用 width:100% （试图满足任何宽度的手机）而不是特定的像素值时也遇到了问题。在整页 div 上使用 overflow:hidden 似乎也很不稳定。

我遇到了元素会消失并重新出现的显示问题。我在使用 css 旋转时仍然遇到问题。

使用 position:absolute 并使用 window.innerWidth 和 innerHeight 设置页面大小的 div 尺寸似乎可以解决问题。

恐怕有点不具体，但它可能会有所帮助..

于 2012-12-07T22:00:57.923 回答
1

我错过了视口元标记中的 target-densityDpi 字段，这似乎很重要。

将其排除在外意味着手机将所有内容缩小 1.5 倍我很困惑为什么除非背景图形尺寸导致这种行为。我注意到 window.innerWidth 和 window.innerHeight 报告的是 320*533 而不是实际的 480x800 屏幕尺寸。

虽然看起来不错，但我怀疑扩展所有内容的努力占用了太多资源——我在 LogCat 中遇到了绘制超时——我猜这会导致丢失和闪烁。

缩放也导致粗糙的边缘。静态时，手机反过道边缘，但当您拖动元素时，其边缘变得像素化。

于 2012-12-12T08:26:36.307 回答