私はいくつかのdivに背景画像を表示する1ページのウェブサイトを持っています。私はbackground-attachment: fixed
を使って擬似視差スクロール効果を得ました。完全な背景画像がiPhone 5でうまくスケールされない
デスクトップ上では完全に動作します。私は今これがiPhoneで動作しないことを知っているので、私はiPhoneのバージョンからメディアクエリを使用してこのコードを削除しました。 (私はフォールバックと一緒に暮らすことができます)。iPhone 5では、背景画像は認識できないビューにスケールアップされます。
携帯電話のブラウザウィンドウに合わせて画像のサイズを変更するにはどうすればよいですか?私はどこでも答えを探しました。
すべてのメディアクエリを削除しました。私はバックグラウンド・アタッチメントを削除しました。ここにサイトがある場所へのリンクがあります:http://www.mywebdesignstudio.net/danielleb_KKC(私はバックグラウンドの添付ファイルを返す:固定)iPhone 5で見ると、写真が大きすぎます。デスクトップ、ラップトップ、タブレットでは動作しますが、電話では動作しません。そのため、写真を交換して動作するかどうかを確認するメディアクエリです。コード全体のページソースを自由に見てください。
は、ここでCSSのコードです:
@viewport{
zoom: 1.0;
width: device-width;
}
body, html {
height: 100%;
margin: 0;
font: 1em/1.8 "Arial", sans-serif;
color: #777;
}
.bgimg-1, .bgimg-2 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("pic4ghost.png");
min-height: 100%;
}
.bgimg-2 {
background-image: url("radio.png");
min-height: 550px;
}
@media only screen and (max-width: 767px){
.bgimg-1 {
background-image: url("pic4ghostMOBILE.png");
min-height: 100%;
}
.bgimg-2 {
background-image: url("radioMOBILE.png");
min-height: 400px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
.bgimg-1, .bgimg-2 {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.bgimg-1 {
background-image: url("pic4ghostsmartphone.png");
}
.bgimg-2 {
background-image: url("radiosmartphone.png");
}
リンクをチェックし、この日には一般的に行われているので、私は、標準の構文を使用します。http://www.mywebdesignstudio .net/danielleb_KKC – gmitchell