iOS7 で固定背景画像がぼやけるのはなぜですか?どうすれば修正できますか?

iOS7 の固定背景画像に関する問題への対処

クラス " の例で示されているように、CSS で固定背景画像を使用する場合.header」の問題は、特に iOS7 デバイスで発生します。 iPad では、背景画像が拡大されてぼやけてしまいます。この問題は、「background-size: cover」と組み合わせて「background-attachment: fixed」を使用することが原因で発生します。

解決策 1: Background-Attachment を使用する: Scroll

この問題に取り組むための 1 つのオプションは、「fixed」の代わりに「background-attachment:scroll」を利用することです。この調整により、背景画像をページのコンテンツと一緒にスクロールできるようになります。望ましい固定効果からは逸脱しますが、画像が確実に表示されるようにします。

解決策 2: 背景位置を実装する: JavaScript でスクロールする

あるいは、次のこともできます。 「background-position:scroll」を設定し、JavaScript を組み込んで、画像の位置を画面の上部に維持するという、より複雑なアプローチを採用します。スクロールに関係なくウィンドウ。このソリューションは、iOS7 の問題を軽減しながら、望ましい修正効果を提供します。このアプローチのデモは、提供されたリンクにあります。

デバイス固有の調整のためのメディア クエリの適用

これらのソリューションをさらに微調整するには、以下を使用できます。ターゲットデバイスに基づいたメディアクエリ。 「@media screen and (max-device-width: 1024px){}」構文を利用することで、バックグラウンド動作の変更を特にタブレットやスマートフォン デバイスに制限することが可能になります。

以上がiOS7 で固定背景画像がぼやけるのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。