レスポンシブサイトのiPhone/iPadの表示について

Question

こんにちは。いつもお世話になっております。

初めてレスポンシブサイトを作成し、GooglechromeやFirefoxのデヘロッパーツールを使用して
デバイス対応チェックを行っています。

上記のツールで確認して問題がなくても、実際のiPhone/iPadで確認してみると、画面の右側に白い空間があき、サイトが左寄りに
なってしまいます。空間の原因を検索し解決方法を実行してみたのですが、直りませんでした。他のCSSなどの要因がからんでいるのかもしれませんが、ツールでは白い隙間自体が表示されないため、どこを修正すればよいかわかりません。

空間の原因や解決方法が分かる方がおられましたら、ご教授ください。
また、上記のツール意外にデバイス対応チェックに適している何かがあれば教えていただけないでしょうか。

以上、よろしくお願いいたします。

Answer 1

上記のツールで確認して問題がなくても、実際のiPhone/iPadで確認してみると、画面の右側に白い空間があき、サイトが左寄りに

なってしまいます。

右側に余白が大きく出ているという現象の場合、
最も考えられる原因は「要素がコンテンツの幅からはみ出している」
というものになります。
PCのChrome等でウィンドウの横幅を狭くした時に、横スクロールバーが出ていたりしませんか？
もし横スクロールバーが出ているようであれば、おそらく間違いなくどこかにはみ出した要素があるはずです。width設定を再度見なおしてみてください。

初めてレスポンシブサイトを作成し、GooglechromeやFirefoxのデヘロッパーツールを使用して

デバイス対応チェックを行っています。

Firefoxは分かりませんが、Chromeのデベロッパーツールであれば、
ちゃんと「デバイスモード」で表示確認していますか？
また、「デバイスモード」でiPhone等を指定して表示している場合、
ちゃんと設定した通りのスマホレイアウトで表示されていますか？
もし「デバイスモード」での表示確認でPCレイアウトが出ているようであれば、
viewportの設定が入っていない／または間違っている恐れがあります。

これ以上は実際のデータを見てみないと何ともいえないので、
可能であればどこかにUPしてみると誰かが原因を見つけてくれるかもしれませんよ。

Comments

[windows8]

ご回答いただきありがとうございました。
width設定の見直してみようと思います。

また機会がありましたら、よろしくお願いいたします。

Answer 2

手元にデバイスがないのでなんともいえませんが、reset cssなどは使用されていますでしょうか？
もしかしたらブラウザが持っている既存のcssが悪さしているのかもしれません！

Comments

[windows8]

ご回答を有難うございました。
reset.cssはかけているのですが、何か抜けているものがあるかもしれないので
見直してみます。

[MasakazuFukami]

はい！
そういえば実機のcssやjsを確認できるツールがあるのでそれを使用して確認するほうがいいと思います！
http://m.designbits.jp/15011821/

[windows8]

URLまで教えていただき有難うございました。
早速、試してみようと思います。