PCとスマホのみのレスポンシブデザイン

質問

レスポンシブウェブデザインについて勉強中です。
自分なりに書籍を読みながら作成し、
スマホ、タブレット、PCで異なる表示なるようなサイトが作れました。

最近、タブレットはPCと同じで良いとの考えに至り、
スマホとPCだけに対応したレスポンシブウェブデザインにしたいのですが、
いろいろな書籍を読んでも参考がなく、
スマホ、タブレット、PCで異なる表示なるよう解説されたものばかりです。

自分なりにやってみましたが、
PC版をタブレットで表示すると、
上手く縮小されるわけでもなく横スクロールバーが出てしまい、
何とも不恰好なものとなってしまいます。

何か特別な設定というかが必要なのでしょうか。
よろしくお願いします。

回答No.1

machi_mac123

こんにちわ。

質問としては、タブレットでPC版のサイトを閲覧した際に横幅などを適切に見せたいという内容で読ませていただきましたので、その内容で回答させていただきます。

対応するには、いくつか方法があると思いますが、モダンブラウザだけでの対応でよいなら、cssのメディアクエリーを使用するのが、簡単な気がします。

メディアクエリーはウインドウサイズやデバイス解像度などの様々な条件に合わせたcssの変更が可能なので、たとえば解像度によって横幅を変更する事などもできます。

cssの書き方や、現在の主流のタブレットの解像度などはネットで検索していただければたくさんの情報があるかと思いますので、ここで説明するより、そちらをご確認いただいたほうが分かりやすいと思います。

一点注意としては、メディアクエリーはIE8以下では使えません。何処までのバージョンのブラウザをサポートするかもデザインをする上で考えていったほうがよいかもしれません。

以上となります。分かりにくい文章ですみません。