レスポンシブデザインというものでは、PCもスマホも同じデザインを用いて、cssで制御する。
だから書き方に注意しないと、一部だけPC表示のようになってしまうのです。
その最たるミスはcssのwidthをピクセルで書くこと。
これ、100pxとか200pxとかならいいけど、320pxを超えてなおかつviewportのwidth=device-widthなんてやってしまうとちょい困ったことに。
というのもiPhone5とかの横サイズは320pxなので。
横スクロールバーが出てきてしまうのです。
だからメディアクエリなどでcssを切り替える際には、％で指定すること。
100%にしておけばどんなデバイスでも表示可能ですから。
他にも幾つか注意する点はあるけど、個人的に一番やらかしてしまうミスがこいつですからね。
ま、iPhone5もそろそろ使っているユーザーは減ってきているかもしれないけど。
SEってのもあるからまだ320pxという世界には気をつけなければいけないです。
もちろんスマホの場合device-widthでviewportを設定させればそれ以上のwidthでもいいのですが。
ここら辺はサイトデザイン次第でもあるので、デザイン側と調整しましょうね。
ちなみに100%にしていてもborderとかつけてるとはみ出す可能性があります。
そういう時はbox-sizingの設定をしましょ。
だからモバイルファースト、スマホデザインを先に作ったほうが色々と良いのですよねえ。
そもそもそんな凝ったデザインにしないことが大前提ですが。