タブレットやスマートフォン向けのサイトを作っているときにぶち当たる問題が端末の画面に対するデザインのサイズ設定。
デザインもリキッドレイアウトをメインにしつつブロック要素で構成していたりすると画面を回転させたとき、幅が可変にならず右に余白が。。。。といったことがあったのでその対処法も少しばかり載せておく。
一般的に画面が回転するとそれに応じてブラウザの縦、横幅のサイズも入れ替わるはずなのだが、一部には入れ替わらないものがあり、そのときの対処を考えるのに無駄に時間がかかったりしてしまう。
自分がいろいろ探して見た結果、回転したときの角度を取得してそれに応じて画面幅をviewportにJavaScriptで振り分ける方法が比較的簡単に適応できる方法だとわかりました。
JavaScriptで window.orientation を使うと角度が取得できる。
自分が検証に使った端末は横長のときに0度or180度、
縦長のとき90度、-90度と表示されていたので、
縦横が入れ替わらない場合の設定は（jQuery使用）
var orientation = window.orientation;
//角度の取得if((orientation == 0)||(orientation == 180)){
//横長のときの設定
var hscale = $(window).width();
var wscale = $(window).height();
}else{
//縦長のときの設定
var wscale = $(window).width();
var hscale = $(window).height();
}
var viewport = $(‘meta[name=”viewport”]’);
$(全体幅を指定している要素).css({width:wscale});
viewport.attr(‘content’, ‘width=’+wscale+’, initial-scale=1, maximum-scale=1′);
といった感じで設定。
よりシームレスにするには画面幅に応じていくつかレイアウトデザイン(max-width?など)を定めた上で行うと効果的。
未だ少し理解できていないAndroid OS2.Xと3.Xのブラウザのviewport周りの挙動についてわかり次第またかきます。
