2017「iPhone6で背景画像を固定する方法」への回答

私は背景画像を持つHTML/CSSウェブページを持っています。画像はデスクトップ上に固定されて見栄えが良く、メインテキストは意図したとおりにスクロールします。2017「iPhone6で背景画像を固定する方法」への回答

しかし、iPhone6では、恐ろしく見えます。写真の2つのバージョンが表示されることがあります。両方のバージョンでは、画像をスクロールするのではなく、スクロールし、2つ目の画像をページの全長に伸ばします。

私は回答のスタックオーバーフローについて高値と低値を検索しましたが、答えはありません。メディアクエリは機能していないようです。 -webkitは動作していません。何も動作していないようです。

それは2017なので、おそらくそれは更新された答えの時間です：どのようにiPhone6の携帯電話（とサファリとモバイルサファリ）でこの問題を回避するには？

これは私がこれまで持っているコードです：

body { 
    background-image: url(rsz_background.jpg); 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
}

注：iphone6、またはiPhone5のためにクロムdevのツールを使用してサイトを表示した場合www.successfulnewyear.com：ここでは、ウェブサイトへのライブリンクです - それはバックグラウンドで置くと美しくスクロールするように見えます。ただし、iphone5またはiphone6のサイトに実際にアクセスすると、写真がウェブサイト全体のサイズに拡大され、固定されずにスクロールすることがわかります。

出典

2017-01-17 Monroe Mann

viewControllerで表示されるように画像をウィンドウに置く –

異なる解像度に複数の画像を使用する必要があります。 [ここをクリック]（http://stackoverflow.com/questions/16443380/common-css-media-queries-break-points） – iphonic

身体のすぐ下の別のdivに背景画像を置くことができます。このdiv位置を固定します。次に、固定されたパラメータを使用せずに背景画像を配置します。

<html lang="en"> 
    <head></head> 
    <body> 
    <div class="bkgdImage"></div> 
    <header></header> 
     <section id="homeContainer"> 
      //content etc 
     </section> 
    </body> 
</html>

CSS：

html{ 
height: 100%; 
min-height: 100%; 
} 
body { 
min-height: 100%; 
width: 100%; 
height: 100%; 
margin: 0; 
} 
.bkgdImage { 
position: fixed; 
right: 0; 
bottom: 0; 
min-width: 100%; 
min-height: 100%; 
width: auto; 
height: auto; 
z-index: -100; (so it's behind your content) 
margin: 0; 
background: url(../yourimage.jpg) center center no-repeat; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
}

これは私のiPhone 5と私は上のテストしたすべてのモバイルたブラウザ上で動作します。必要に応じて、&本文の高さを変更する必要があります。 You can see it working hereおよびdid a blog post on it。

出典

2017-08-02 15:29:24

2017「iPhone6で背景画像を固定する方法」への回答

答えて

関連する問題