W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:u7mlmr さんの質問

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 件

ID:xEiEjl さんの回答

確か機種の向き(縦向き・横向き)によってサイズが変わるはず。だからレスポンシブだと崩れる。詳しくはググってくれ。

ID:GO2g9J さんの回答

1.metaタグのviewport設定を確認
2.linkタグのmedia属性max-width,min-width設定を確認
CSSのファイルを分けてるということはlinkタグで出し分けてるよね?どっか間違えてるかもだから1ファイルにまとめて@media screenでブレイクポイント設定してみれば?もしそれでダメならChromeのDeveloperToolsで何のCSSがあたってるか調べる。

最終更新日:2017-01-12 (763 views)

関連するトピックス

ページ上部に戻る