backgroundの大きさがスマホ上でバラバラになります

###前提・実現したいこと

背景(background)の大きさがバラバラ

chromeデベロッパーツール上ではPC/スマホでの見え方は完成していて、何も問題はありません。
しかし、いざサーバーにアップすると、PCは問題ないのですが、スマホ上では背景の見え方がページによってはバラバラになります。
具体的には拡大されているように見えます、しかもページによって拡大の％もバラバラです。
もちろん、拡大されず、ちゃんと表示されているページもあります。

わからないのが、デベロッパーツール上では何も問題ないという点です。
誰が教えていただけると幸いです。

###該当のソースコード
背景に対して共通に書いているコードです。

.menu {
background-image: url(../image/back_content.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
html5/css3/bootstrap/jquery

kei344

2017/02/17 18:29

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答4件

状況を再現できるコードがないので幾つか可能性を挙げることしかできませんが、以下のようなことが考えられます。

HTMLタグの閉じ忘れ。
属性のダブルクォーテーションの閉じ忘れ。
background-sizeにベンダープレフィックスをつけてみる。
<や>, ", 'などが全角文字になっていたり、全角の空白が入っている。

また、background-size:coverをつけたときと外したときで何か違いがありますか？

投稿2017/02/17 17:50

編集2017/02/17 17:51

s8_chu

総合スコア14731

ベストアンサー

例えば、閲覧しているスマホ端末のOSのバージョンが古いと、「background-size」はベンダープレフィックスを付けないと効きません。

ベンダープレフィックスを付けた記述を追加してみてはいかがでしょうか？

または、「background-size:cover;」が適用されているので、端末幅によって見え方が変わるのは仕様かと思います。
どういった見え方を想定されているかは分かりかねますが、例えば
「background-size:contain;」
に変更したら想定通りになるといったことはございませんでしょうか？

投稿2017/02/17 17:38