そもそもこのレイアウトは、ジャンボトロンにバックグラウンドを設定しているレイアウトだった。これは全くうまくいかないことがはっきりしてきた。ジャンボトロンも、表示するデバイスによって設定を変えているようだし。
background:url()を使ったフロントレイアウトで、うまくタブレット、携帯で表示されない。imageデータのせいではないようだ。dpi設定を変えても全く反応が変わらない。background-imageを使うと画像が表示されない。これはジャンボトロンとどこでコンフリクトしていそう。
やっと解決！！
background-attachment: fixed;とbackground-size: cover; を使うとスマホで正しく表示されない
スマホの場合、background-attachment: fixed;が効かず、固定にならない状態でそのままスクロールする現象やbackground-size: cover;で正しく拡大されないなどの問題が発生します。その対策として擬似要素を生成してその擬似要素を、z-index: -1;で背面にまわし、position: fixed;で固定させることで対応する手法があります。モバイル表示の用に下記のCSSを追加します。
クエリを使った方がいいのか？これは正解であり、少し間違い。
細かなクエリで表示画面を設定して、PC、スマホに分ければいいのだが。タブレットは、スマホのブラウザである。特にiOSのSafariはあまりそのところは対応していないようだ。iPadProを使っていて、横にして表示するとPCのサイズくらいあるから、結局全て、スマホの設定でするしかない。
background-attachment: fixedは使えず ::beforeで、z-index: -1; position: fixed; display: block; background-size: cover;で指定しいくのが今のところ無難。スマホのブラウザ対応が良くなればいいのだが。
さてさて、ここまでは良かったが、スマホ iPhoneだけは設定がうまくいかず。メディアクエリで、画像サイズも小さくしてやってみたが、ダメである。もともと、googleの宣伝が上についているので、それが原因の可能性もあるか。
