webサイトを製作中で、レスポンシブで下記のような悩みがあります。
○safariとiosでブレイクポイント通りのスタイルが効かない!
iosで確認すると、PCのスタイルが効いていたり、その逆もあります。
- ワードプレスで構築。
- スマホ(~679px)・タブレット(680px~1119px)・PC(1120px~)のブレイクポイントを用意。
- スタイルシートを3デバイス用用意。headerで読み込んでいます。
- safari(win/ver5.1.7)とios以外では正しく表示される。
cssが効いていないわけではなく、スマホでPCのスタイル(例えばdisplay:noneとか)があてがわれてしまったり、その逆もあったり。。
現状タブレットを非対応にして、スマホ(~490px)・PC(491px~)にして表示が崩れないよう対処してます。
iosだけ画素数が多いから。。などの理由があるのでしょうか?ご教授のほどよろしくお願いいたします。
みんなの回答 2 件
確か機種の向き(縦向き・横向き)によってサイズが変わるはず。だからレスポンシブだと崩れる。詳しくはググってくれ。
1.metaタグのviewport設定を確認
2.linkタグのmedia属性max-width,min-width設定を確認
CSSのファイルを分けてるということはlinkタグで出し分けてるよね?どっか間違えてるかもだから1ファイルにまとめて@media screenでブレイクポイント設定してみれば?もしそれでダメならChromeのDeveloperToolsで何のCSSがあたってるか調べる。
関連するトピックス