質問: レスポンシブデザインの確認ツールを利用しながらホームページを作成したのですが、確認した状態と実際にスマホで見た画面に差異が見られ、その原因が分かりません。 こちらの確認ツール(サイト)を利用しました。 http://lqd.jp/lab/rwd.html?url= 具体的にはCSSで「background-attachment: fixed;」と指定し、スクロールしても背景が固定されたままにしたつもりが、実際には固定されていない点。 また「background-position : 22%;」などスマホ向けに背景画像の表示を調整したつもりが、実際には見当違いの部分が変に拡大された点、などがあります。 どれも上記の確認ツールでは問題なく作動しておりました。 またPCのページはバッチリ作動しており、スマホのみ不具合が起きるという点も原因がよく分かりません。 因みにスマホのキャッシュも消去してみましたが改善されませんでした。 サーバーはXdomainの無料のもの。作成したファイルはHTMLファイル、CSSファイルのみです(レスポンシブデザイン用にCSSファイルは別に分けました)。不具合の起きたスマホはiPodTouch、HUAWEI LUA-L22(持っている端末全て)です。 どなたかお知恵を拝借出来ませんでしょうか。
回答: iosに関しては下記が参考になりませんか。 background:fixedでの背景固定はiOS(iPhone)でうまく動かないのでこれを使いましょう | 大阪のホームページ制作会社YCOM 下記のリンク先だと、「ndroid8.0やiOS11でもFixedが効かずに表示が崩れてしまいます。」と書いてありますね。 CSS background-attachment バグの回避の方法 2019 | iT-eXPERIENCE