レスポンシブデザインがスマホの画面に適応されません。

Question

レスポンシブデザインの確認ツールを利用しながらホームページを作成したのですが、確認した状態と実際にスマホで見た画面に差異が見られ、その原因が分かりません。

こちらの確認ツール（サイト）を利用しました。
http://lqd.jp/lab/rwd.html?url=

具体的にはCSSで「background-attachment: fixed;」と指定し、スクロールしても背景が固定されたままにしたつもりが、実際には固定されていない点。
また「background-position : 22%;」などスマホ向けに背景画像の表示を調整したつもりが、実際には見当違いの部分が変に拡大された点、などがあります。

どれも上記の確認ツールでは問題なく作動しておりました。
またPCのページはバッチリ作動しており、スマホのみ不具合が起きるという点も原因がよく分かりません。

因みにスマホのキャッシュも消去してみましたが改善されませんでした。
サーバーはXdomainの無料のもの。作成したファイルはHTMLファイル、CSSファイルのみです（レスポンシブデザイン用にCSSファイルは別に分けました）。不具合の起きたスマホはiPodTouch、HUAWEI LUA-L22（持っている端末全て）です。

どなたかお知恵を拝借出来ませんでしょうか。

Comments

[kyoya0819]

Chromeの検証ツールはどうですか？

[hatena19]

回答者が動作検証できるHTMLとCSSを提示できませんか。
あるいは該当ページのURL。

[yoshinavi]

＞その原因が分かりません。
→　回答側も各コードがないと検証出来ません。症状が再現するコードを提示してください。

Answer 1

iosに関しては下記が参考になりませんか。

background:fixedでの背景固定はiOS（iPhone）でうまく動かないのでこれを使いましょう | 大阪のホームページ制作会社YCOM

下記のリンク先だと、「ndroid8.0やiOS11でもFixedが効かずに表示が崩れてしまいます。」と書いてありますね。

CSS background-attachment バグの回避の方法 2019 | iT-eXPERIENCE

Comments

[punchan36]

参考にさせて頂いたところ無事作動致しました。
「background-position : 22%;」が反映されない点は未だよく分かりませんが、代わりに「background:url(hoge.jpg) 22% no-repeat;」とする事で一応解決できました。
迅速かつご丁寧に教えて下さり有難うございました！