この同様の質問に完全に答えた人はいません。
そのため、自分の状況に固有の独自のバージョンを投稿します。
問題はposition:fixed、一部の Android ブラウザで子の画像要素がぼやけることです。私の場合、Android 4.0 を実行している Galaxy Note v1 のストック ブラウザでこの問題が発生します。一部のGalaxy S3についても同じことを言っている人もいます. これが私のコードです：
プレビュー@ http://jl.evermight.net/blurryposition/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="top-nav-container"
style="
display:block;
top:0px;
position:fixed;
width:100%; height:5.2rem;
">
<a style="background-image:url(logotest_big.jpg);
background-size:20%;
display:block;
width:500px;
height:200px;
"></a>
</div>
</body>
</html>
最初は、OPTIX Testing のロゴがぼやけていることに気付くでしょう。position:fixedから削除する#top-nav-containerと、ロゴがくっきりと鮮明になります。私の質問は、position:fixed鮮明なロゴと両方を維持するにはどうすればよいですか?
私の実際の Web サイトでは、サイトをスクロールしている間、上部のナビゲーションは固定されているはずです。スクロール時にトップ ナビゲーションの位置を変更するために JavaScript を使用してみposition:absoluteましたが、ジャンプやちらつきの効果が大量に発生しました。モバイル Web ブラウザーのトップ ナビゲーションを使用できない場合position:fixed、またはトップ ナビゲーションを修正できない場合、他にどのようなオプションがありますか? position:absolute他のモバイル Web サイトはどのようにしてこの結果を達成していますか?
追加情報：
画像のサイズ変更、ビューポートの変更、および位置の変更 (固定/絶対) についてさらに実験を行い、興味深い結果が得られました。下記参照：
- 位置:背景なしのサイズをビューポートで固定 -あいまい
- 位置:ビューポートなしの背景なしのサイズを固定 -くっきり
- position:fixed background-size:20% with-viewport - fuzzy
position:fixed background-size:20% ビューポートなし -あいまい
位置:背景なしの絶対サイズ、ビューポートあり -ファジー
- position:absolute no-background-size without-viewport -鮮明
- position:absolute background-size:20% with-viewport -鮮明
- position:absolute background-size:20% ビューポートなし -くっきり
このチャートの読み方は次のとおりです。
最初の列
#top-nav-containerは、position:fixed または position:absolute を使用しているかどうかを示します2 番目の列は、使用
background-size:20%したか省略したかを示します3 番目の列は、
<meta viewport>タグを head に含めたかどうかを示します4 番目の列は、optix テストのロゴがぼやけているか鮮明であるかを示します。
結果を見ると、position:fixed を持つコンテナーで鮮明な画像が得られるのは、画像が background-size またはビューポートを使用して引き伸ばされたり圧縮されたりしていない場合のみであることがわかります。また、position:absolute を持つコンテナーであいまいな画像が得られるのは、画像が background-size とビューポートで引き伸ばされた場合のみです。