ストック画像上のぼんやりした画像android browser

Question

私は数週間これを理解しようとしていて、実際の解決策は見つかっていません。私は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 mobileや他のモバイルページにはすばらしく鮮明な画像/アイコンが読み込まれるため、解決策が必要です。ありがとうございました！

Answer 1

あなたのスクリーンショットから、現在あなたの4Gでテストしていることがわかりました（モバイル接続）。

代わりにWi-Fiでテストを繰り返してみましたか？比較するときにキャッシュを取得しないようにする必要があります。ブラウザをプライベートブラウジング/シークレットモードにする価値があります。これにより、内部キャッシュされたアセットを使用するのではなく、ホストから新鮮なアセットを取得しますブラウザのキャッシュ毎回）。

私がデバイスのインターネット接続について言及した理由は、昨年、本当に似たような問題を抱えていたため、配信前に画像を圧縮して帯域幅を節約していたネットワークのプロキシであることを実感しました。

私はマークから離れているかもしれませんが、確かにあなたがあなたのリストからその可能性を越えることができるようにチェックするべきものです。それはケースであることが判明しない場合は

は、テレは全部で本当に興味深い議論です：http://blog.sebcante.com/2012/01/prevent-image-compression-from-3g.html

悪いニュースは、モバイルネットワークは常にキャッシュなしのHTTPヘッダに注意を払っていないということです。

利用できる3最も簡単なオプションは次のとおりです。

• は、HTTPS経由であなたのイメージを提供する - ネットワークが暗号化されたトラフィックをキャッシュしません。
• さまざまなhttpポート経由で画像を配信できます。
• 画像をインラインで埋め込むためにdata-urlを使用します（ただし、その時点ではブラウザサポートの意味があります）。

最後に、HTML5 boilerplateのhtaccessファイルに部分的な回避策があり、これらの影響を緩和する方法がいくつかあります。htaccessのファイルで：

# ---------------------------------------------------------------------- 
# Prevent mobile network providers from modifying your site 
# ---------------------------------------------------------------------- 

# The following header prevents modification of your code over 3G on some 
# European providers. 
# This is the official 'bypass' suggested by O2 in the UK. 

<IfModule mod_headers.c> 
Header set Cache-Control "no-transform" 
</IfModule> 

これは私がテストした英国のネットワークのカップルで動作しますが、あなたの結果は変更になる場合があります。..

Answer 2

私は同じ問題を抱えていたとの原因ということが分かりましたデフォルトのAndroidウェブブラウザ（ではなく、 Chrome！）のposition:fixedとz-indexの問題です。

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

私の経験から、position:fixedはいいえモバイルの場合は特にで、特にAndroidや古いiOSバージョンの場合はそうです。 position:fixedをうまく処理できる唯一のモバイルOSは、iOS6以降のバージョンです。

---

更新：これまでのところ、私が知っている唯一の修正が単にposition:fixedとz-indexを組み合わせ避けるためです。場合によっては、z-indexを取り除くだけで、やりとりをしたり、iOSやAndroidで全くposition:fixedを使用しないことがあります。とにかくモバイルでは良い練習ではありません。それ以外にも、ほとんどのAndroid搭載端末でChromeがデフォルトのブラウザとしてAndroid Stock Browserをできるだけ早く置き換えることを祈ることしかできません。