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; 
}

これがタブのhtmlです

<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

ビューポート メタタグから target-densityDpi フィールドを見逃していましたが、これは重要なようです。

それを省略すると、電話はすべてを1.5倍に縮小することを意味します。背景のグラフィックスの寸法がこの動作を引き起こさない限り、なぜ私は混乱しています. window.innerWidth と window.innerHeight が実際の 480x800 画面サイズではなく 320*533 を報告していることに気付きました。

問題ないように見えましたが、すべてをスケーリングする作業があまりにも多くのリソースを消費していると思われます - LogCat で描画タイムアウトが発生していました - これがドロップアウトとちらつきを引き起こしたと思います.

スケーリングも粗いエッジを引き起こしています。静的な場合、電話は端を反通路にしましたが、要素をドラッグすると、その端がピクセル化されました。

于 2012-12-12T08:26:36.307 に答える
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 に答える