CSSフルスクリーンの背景はDevツールでは動作しますが、実際のブラウザでは機能しません

Question

Meteor App/Websiteを構築しましたが、このページ（https://www.conducate.com）の上部に応答全画面の背景画像を表示しようとしています。

Chrome開発ツールとSafariレスキューデザインモードでは正常に動作しますが、ページを展開してモバイルで見ると、画像の上部が拡大されているようです。 dev-toolsから期待どおりサイズを変更しません。その結果、灰色のぼやけが見えます。

これまでにこの問題に遭遇しましたか？すべてのデベロッパーツールで正しく動作するため、デバッグは困難ですが、モバイルデバイスで実際に表示した場合はまったく動作しません。

以下は私の携帯電話（iPhone 6s、Safariブラウザ）からのスクリーンショットとmy macのSafariレスポンスデザインモードからのスクリーンショットを含む画像へのリンクです。残念ながら、私が原因評判の不足のために画像を投稿することができませんので、私はただのリンクを投稿することができます - 私はまだここに初心者です...

https://s3.eu-central-1.amazonaws.com/conducate-images/stackoverflow/example_screenshots.png

すべてのヘルプははるかに高く評価されます！

Answer 1

一部のiOS固有の問題を検索した後、最終的にいくつかの例を見て問題の解決方法を見つけました。

それは、ほとんどのブラウザは

.container{ 
    background: url(http://www.link-to-image.jpg) 
    ... 
} 

CSSラインを理解する。これは、iOS用のケースではないこと、が判明し、ここであなたは具体的には、バックグラウンドのために使用されている画像、されている状態にする必要があります。

.container{ 
background-image: url(http://www.link-to-image.jpg) 
... 
}