この１年、タブレット向けのサイトを作る機会が増えてきたので実際の解像度とブラウザーの表示サイズが異なることで起こる問題の対処法をまとめました。
目次
ランドスケープ表示とポートレート表示、双方できれいなレイアウトで見せたいとき
ターゲットとするタブレットのアスペクト値によって多少変わりますが、CSS3のmediaqueriesを使い、２サイズをだし分けるのが最も簡単で失敗しない方法だと思います。JavaScriptで回転した際にviewportを書き直してもよいのですが、端末によって挙動や動きが異なる場合が多いので、mediaqueriesなどプログラムをなるべく使わない方法でレイアウトを変更するのが得策。
書き方は
@media screen and (max-width: 820px) {/*820pxまでのサイズのとき*/body{}...}
@media screen and (min-width: 820px) {/*820px以上のサイズのとき*/body{}...}
といった書き方になります。
実際の解像度で作ったところ、拡大表示されてしまうとき
viewportをwidth=device-widthで設定したにもかかわらず、拡大表示される場合があります。
その場合はinitial-scaleを1以下の数字にして縮小表示させることでタブレットのサイズに合わせます。
たとえば
<meta name=”viewport” content=”width=device-width, initial-scale=0.66,minimum-scale=0.66,maximum-scale=2” />
といった書き方。
微妙に横幅が大きくなり、スクロールしてしまうとき
viewportやmediaqueriesを使い、サイズを合わせたものの、微妙に幅が合わず、スクロールが出てしまうときはCSSでbodyや一番外側のブロック要素にoverflow-x:hiddenの設定を追加します。
そもそもの改善にはなりませんが、横スクロールしなくなり、ユーザビリティが多少改善されます。
リキッドレイアウトを活用して様々なサイズに対応させる。
スマートフォンやタブレットでは出来る限り画面サイズ幅いっぱいにコンテンツを表示させたいので、幅指定を100％にすることを前提に、スマートフォンとタブレットでのコンテンツ表示を共有する場合やレスポンシブデザインを行う場合にはmediaqueriesを使い、全体幅とブロック要素の回り込み、表示非表示を制御します。
アドレスバーを非表示にする＋ひと工夫
スマートフォンでもよく使われる方法ですが、JavaScriptを使い、アドレスバーを消すことで画面の高さーステータスバーの高さをコンテンツに当てることが出来ます。ランドスケープの場合ファーストビューの領域がアドレスバーで削られてしまうときの弊害が大きいので下のようなスクリプト(jQuery)を追加することで対処します。
function onloadpage(){
setTimeout(function(){
var h = $("body").scrollTop();
if(h==0){
setTimeout(function(){ window.scrollTo(0,1); },110);
setTimeout(function(){ window.scrollTo(0,0); },111);
}
},100);
}
読み込み中にユーザーがスクロールしているときには動作しないよう、スクロールを検知するようにしています。
気になるところはご指摘いただければ対応します。また何かわかれば追記します。