iOS 7デバイスでぼやけた背景画像を修正する方法?

iOS 7 との固定背景画像の互換性

固定背景画像を実装する場合、さまざまなデバイス間での互換性を確保することが重要です。ブラウザ。ただし、iOS 7 では特定の問題が発生する可能性があります。

最近、あるユーザーは、iOS 7 を実行している iPad 上で Web サイトの背景画像が拡大表示され、ぼやけて見えるという状況に遭遇しました。ユーザーは次の CSS コードを提供しました。

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  color: #fff;
  background: url(../images/boston2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

この問題を解決するには、いくつかの解決策が考えられます。

オプション 1: を使用します。 Background-Attachment

1 つのアプローチは、background-attachment: 固定ではなくスクロールを使用することです。この方法では、固定背景の意図した効果は得られませんが、モバイル ブラウザで画像を表示できるようになります。

オプション 2: 背景位置と JavaScript を使用する

代わりに、background-position:scroll を設定して JavaScript を組み込んで、スクロールされた位置に画像を保持し、固定背景を効果的に「偽装」することもできます。サンプル実装は次のとおりです:

// Calculate the initial scroll position
var scrollPosition = window.scrollY;

// Add an event listener for the scroll event
window.addEventListener("scroll", function () {
  // Update the scroll position as the user scrolls
  scrollPosition = window.scrollY;

  // Set the background position to be scrolled with the window
  document.querySelector(".header").style.backgroundPosition = "center " + scrollPosition + "px";
});

この JavaScript アプローチは、iOS 7 デバイスで固定背景効果を維持しながら、ぼやけたりズームインされた画像の問題を回避する動的なソリューションを提供します。

以上がiOS 7デバイスでぼやけた背景画像を修正する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。