スマホサイトの表示幅調整

現在の仕事はソシャゲ開発をやってるわけで、当然時代の流れに沿ってスマホ対応もあります。
開発してるのはWebアプリなのでiPhoneとAndroidでソース統一できるんですけど、Androidは意外と曲者がいたりしてやっかいです。
先日Android用のFlashプラグインも配布が終ってしまってFlash再生不可な機種もでてきましたし。
Androidも3.0からSVGに対応したようなので、早くSVGの普及が進んで欲しいところです。

今回はGALAXY Nexusなどの機種で下記のようにおなじみのviewportを指定しているにも関わらず、画面いっぱいに表示されない件について。

<meta name="viewport" content="width=320, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

幅320px前提で作成したサイト用にJS対処してみたんでサンプルコード載せときます。これはページがロード後に実行してください。
もちろん上記のviewportと併記です。iOSは影響ありません。

var w = window;
var userAgent = window.navigator.userAgent;
var html = document.getElementsByTagName('html').item(0);
var event = document.createEvent('HTMLEvents');

event.initEvent('resize', true, false);
w.addEventListener('resize', function() {
    if (/Android/.test(userAgent) && Math.abs(w.orientation) === 0) {
        html.style.zoom = w.innerWidth / 320;
    }
}, true);
w.dispatchEvent(event);

ちなみにjQuery版

var $window = $(w);
var userAgent = window.navigator.userAgent;

$window.bind('resize', function() {
    if (/Android/.test(userAgent) && Math.abs(window.orientation) === 0) {
        $('html').css('zoom', $window.width() / 320);
    }
}).trigger('resize');

var viewerHeight = w.innerHeight ? w.innerHeight : $window.height();
viewerHeight = viewerHeight < 480 ? 480 : viewerHeight;
$('body').css('min-height', viewerHeight);

縦表示では横幅いっぱいで縦スクロールだけする感じで、画面を横にしてもレイアウトと横幅を（ほぼ）維持したままの表示になります。
くるくるやってると時々おかしくなりますが、また傾きを変えればすぐ直るので気にしないで下さい。