スマホサイトのブラウザで拡大した時の表示崩れ

Question

webサイトを直接入力で作っておりまして、PCでの表示、動作ならびにスマホでの表示、動作も確認しました。
メディアクエリを利用してスマホ版を作った（メニューがハンバーガーメニューになり並べ替えが発生し表示が変わる）のですが、スマホのブラウザの表示倍率を変更すると大きく表示が崩れます。
iphoneのsafariの”あ”のボタンを押して拡大縮小表示を確認しましたが、125％以上になると全部が大きくなって要素同士が被ってしまいます。
様々試したのですが解決できず、どういったところを改善すればよいものか迷いましてご相談させて頂きました。
初めての質問でわたしも戸惑っておりますが何卒宜しくお願い申し上げます。

実現したいこと

現在、拡大ボタンを押したらすべてが拡大するので
・スマホで拡大表示をしてもレイアウトが崩れない
・画像など、文字以外は拡大させない
その他、ほかに何か解決の糸口になるようなヒントを頂ければ幸いです

試したこと

・METAタグのViewportでwidthを固定したり、 user-scalableをnoにしてみたりしました。

Comments

[NKTIDKSG]

そちらが再現するHTML/CSSを掲載しないと、レビューができませんよ。

Answer 1

具体例が挙げられていないため一般論になりますが、
125%になった程度でレイアウトが崩れるとなると、
違う世代のiphoneでさえも解像度の違いによってレイアウトの崩れは起きそうですね

対策としてはスマートフォンのような小さい解像度のデバイスで表示した際にはメディアクエリ@mediaで細かく解像度を指定して、
想定した横幅を超えたときに要素の列数を狭めていくことになります。
3列(with:33%)で表示しきれなかったら2列に(width:50%)、それでもだめなら1列に(width:100%)と言った感じです。