レスポンシブサイトにおけるタブレットの扱い
タブレットって意外と横幅がとってあるものが多くあります。
iPadの横幅は1024px程あるので、少し前のパソコンと同等の画面サイズがあるんですよ！
多くのWebサイトは、横幅1000px程度で作られている事が多いので、PC版の画面を表示しているケースが多くあります。
タブレットを縦に持ち替えた時、横幅は768pxになります。
なので多くのレスポンシブサイトは770pxくらいでレイアウトを切り替えるCSSを書いていると思います。
ですが最近、パソコンの画面サイズも大きくなってきました。
1280pxや1920pxの画面サイズが主流なのではないでしょうか？
タブレットのサイズが大きいので、差別化を図るためにも画面サイズをより大きくしているのでしょうか？いずれにしても画面が大型化してきています。
この画面サイズの推移によって、Webサイトも横幅を大きくとるケースが増えています。
今までであれば1000pxが主流だったのが、気が付けば1100pxとか1200pxを想定している場合も多くあります。
Webサイトの横幅肥大によって起こるタブレット対応への問題
画面の余白そ詰めて、最初に開いた画面（ファーストビュー）に多くの情報を詰め込んだり、より大きく情報を掲載してインパクトを与えたりと、さまざまなデザインに活用できるのですが、ここで一つ問題が出てきます。
それはタブレットへの対応です。
iPadでは1024pxという横幅を持っていますが、Webサイトがそこに収まるサイズで作られていなければ、当然はみ出ます。
ページを表示してからピンチイン（指二本で画面をつまむような操作）をして全体を縮小すれば収まりますが、最初に開いた時点ではみ出ているのはあまり気分の良いものではありません。
きちんと対応してくれよ・・・と思うでしょう。
これに対応するにはいくつか方法が考えられます。
1.iPad等のタブレット幅1024pxになった時点で横幅に収まるようにデザインする
タブレットを横にした時の1024pxから縦にした時の771pxまでの間を埋めるように、レイアウトを作る方法です。
これによってはみ出ないようにできます。
但しPCレイアウト、タブレットレイアウト横（1024px）、タブレットレイアウト縦（770px）、スマートフォンレイアウト（460px程度？）と4つのレイアウトを想定したデザインを作る必要がでてくるので、ただでさえ調整、工数の多いレスポンシブWEBデザインにさらに工数が増してしまいます。
2.画面幅に収まるように縮小する
PC用の画面レイアウトを縮小してしまえ！という考え方です。
想定して作っている画面サイズにそれほど差がなければ、収まるように縮小してしまうのも一つの方法でしょう。
これであればレイアウトのパターンを追加することなく、簡単に対応できそうです。
但しレスポンシブWEBデザインでは設定しなければならない「viewport」を画面幅、もしくは機械を検知して切り替えなければならないので、その対応が大変そうではあります。
まとめ
今まで1024pxに収まるようなWebページが多くありましたが、画面の大型化に伴ってWebサイトも大きくなってきています。
また、現在では閲覧する事の出来る端末が様々なものが発売されており、それに合わせて快適に閲覧できることが求められています。
それに対応するためにレスポンシブWEBデザインが生まれたわけですが、タブレットを横持ちにした時の画面サイズだと正直ページが収まらないケースというのが多く出てきています。
パソコンであれば、ブラウザのウインドウを縮めた時に横スクロールが出る。というのは「しかたないか」と思えますが、タブレットやスマートフォンの場合はウインドウを縮めるという操作がありません。
またアプリなど、画面に綺麗に収まるように作られているものを見慣れている事もあってか、はみ出るのはなんだかおかしいという認識も強いのかもしれません。
Webサイトを1024pxを超えるサイズで作る時、「タブレットで見るとはみ出る」という事も考慮して調整していく必要がありそうです。
