Railsで生成されたブートストラップされたWebページのヘッダーイメージは、Chrome/firefox/Operaで正しくサイズ変更されます。私は、ヘッダーモバイルサファリでヘッダーイメージのサイズ変更が行われない - 完全にズームアウトされたままになる
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes">
に次のメタタグを持ってここにHTMLとCSSです:
<!-- This is the Html -->
<div class="section section-fill-height">
<div class="background-image background-image-fixed" style="background-image : url('sample1.jpg')"></div>
</div>
/* And this is the CSS */
.section {
position:relative;
}
.section-fill-height {
display: flex;
height:100%;
align-items: center;
}
.section .background-image {
z-index:-1;
position:absolute;
top: 0px;
left: 0px;
width:100%;
height:100%;
background-size: cover;
background-position: center;
}
.section .background-image.background-image-fixed {
background-attachment: fixed;
}
たち提示してくださいあなたのイメージのHTML/CSS。モバイルSafariには、背景画像や背景添付ファイルなどのいくつかの問題があります。しかし、あなたのhtml/cssを見ることなく、私たちが助けることはあまりありません。 –
こんにちは@ SuneS.-T。 OK、上記にhtmlとcssを追加しました。ありがとうございました – esp4u
あなたの投稿されたコードに基づいて以下の回答を追加しました。 –