タブレットやスマートフォン向けサイトを画面サイズに合わせてviewportを変える際のTips

タブレットやスマートフォン向けのサイトを作っているときにぶち当たる問題が端末の画面に対するデザインのサイズ設定。

デザインもリキッドレイアウトをメインにしつつブロック要素で構成していたりすると画面を回転させたとき、幅が可変にならず右に余白が。。。。といったことがあったのでその対処法も少しばかり載せておく。

一般的に画面が回転するとそれに応じてブラウザの縦、横幅のサイズも入れ替わるはずなのだが、一部には入れ替わらないものがあり、そのときの対処を考えるのに無駄に時間がかかったりしてしまう。

自分がいろいろ探して見た結果、回転したときの角度を取得してそれに応じて画面幅を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周りの挙動についてわかり次第またかきます。

MEDIASの液晶画面にフィルムをDIYして貼ってみました。

MEDIAS × アンチグレアフィルム
MEDIASを手に入れてから様々なフィルムを試したものの、いいものがない。はっきり言って使えない。。。
のでiPadやiPod touchでも使っているパワーサポート社のiPad用のフィルムをDIYして貼りました。
用意したものは以下のようなもの
 
作るときに使った道具
パワーサポート アンチグレアフィルムセット for iPad PIP-02
はさみ(ALLEXのスリム。曲線がきりやすい)
カッターナイフ
ステンレス定規
水性のペン
など。
iPad用のフィルムだと3、4枚分の大きさになるので端の直線を利用してガラス面に合わせ、ペンで下書きをし、少し大きめにカット。このときカッターマットの上に白い紙などをおくと切りやすいです。
その後、サイズに合うようカットして画面の側に揃えて貼る。
と言った感じ。中に気泡の入らないように貼る方法はググるなどするとたくさん出てきます。
パワーサポート社のアンチグレアフィルムはサラサラしているので操作感がとてもよいです。
アンチグレアフィルムセット

iPhone / iPod touchの画面をMac上で表示するアプリ


今回紹介するアプリがJailBreak必須なので導入、利用は自己責任にて。
iPhoneやiPod touchの画面をMacのデスクトップ上で表示できれば、Ustreamなどで画面を見せたい場合、CamTwistを使うことでフレームのコマ落ちはしてしまうものの、別途Webcamを用意して、固定してといった煩わしい準備をせずに、綺麗な画質で見せることができる。
使うアプリは「ScreenSpliter」とMac上に表示するための「DemoGod」。
Macと端末間の接続は無線LANが必須となります。