8

私はこれを何週間も理解しようとしてきましたが、実際の解決策は見つかりませんでした. 回避策を 1 つ発見しましたが、非常に面倒です。

私のGalaxy S3のデフォルトブラウザでは画像がぼやけて読み込まれますが、クロムとFirefoxでは回避策なしで完全に読み込まれます. 画像はすでに高 DPI 画面の 2 倍であるため、問題ではありません。

回避策は、テキストをリンクに配置することです。置いた "。"

<a href="#">.</a>

フォントサイズを非常に小さくします。

#closeButton a{
float:left;
display:block;
position:fixed;
top:9px;
left:10px;
width:46px;
height:44px;
background:url(../img/camera/closeX@2x.png) 0 0 no-repeat;  
background-size:46px 90px;
text-align:center;
font-size:1px;
color:#FFF;
}
#closeButton a:active{
background-position:0 -45px;    
}

<span id="closeButton"><a ontouchstart="" href="vibes.html"></a></span>

回避策なしのスクリーンショット: http://igor2.com/blurry/no-text.png

回避策のスクリーンショット: http://igor2.com/blurry/with-text.png

どんな助けでも大歓迎です！私はこれを理解しようとして髪を引っ張ってきました。Facebookモバイルやその他のモバイルページは鮮明な画像/アイコンをロードするため、解決策が必要です. ありがとうございました！

4

2 に答える 2

5

私は同じ問題を抱えていましたが、問題の原因はデフォルトの Android Web ブラウザー ( Chrome ではありません!)position:fixedにあることがわかりました。z-index

これらの css 属性を削除した後、すべての画像が非常に鮮明で鮮明になりました。

私の経験から、特に Android および古い iOS バージョンでposition:fixedは、モバイルには使用できません。私が知っているモバイル OS でposition:fixedうまく処理できるのは、iOS6 以降のバージョンだけです。

更新:これまでのところ、私が知っている唯一の修正は、position:fixedとz-index. position:fixediOS や Androidでは、z-index を削除するだけでうまくいく場合や、まったく使用しない場合があります。とにかく、モバイルでは良い習慣ではありません。それに加えて、Chrome が将来、ほとんどの Android デバイスでデフォルトのブラウザーとして Android Stock Browser にできるだけ早く置き換わることを祈るしかありません。

于 2013-05-28T08:24:47.347 に答える