ID:u7mlmrHyMjLT さんの質問

419 views

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だけ画素数が多いから。。などの理由があるのでしょうか?ご教授のほどよろしくお願いいたします。

登録日:4日前 · カテゴリー:HTML・CSS

みんなの回答 2 件

4日前 · ID:xEiEjlujCWsE 報告

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

4日前 · ID:GO2g9JRKYF9i 報告

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

質問に回答する



or 画像のアップロード
著作権や他人の権利を侵害する画像をアップロードした場合、利用規約および関連法規により処罰を受けることがあります(有料写真素材の掲載は削除いたします)