スマホのコーディングを手抜き出来るJS #JavaScript

様々な画面サイズのスマホに対応する為にコーディングするのは結構大変なので、そこを手抜きできるJSです。

PCサイトをコーディングするのと同じ感覚で、デザイン通りのサイズでコーディングします。
Retina対応の為に画像を1/2にしたりする必要はありません。
横幅640pxでデザインされた物なら、そのまんまコーディングすれば良いです。
320pxでデザインされた物なら、320pxでコーディングすれば良いです。
(body{width:640px;}とか指定しちゃっても良いかと・・・)

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no>

JavaScript

// HTMLの横幅を指定する。
var HTML_WIDTH = "640";

$(function() {
    $(window).resize(function(){ setZoom() });
    setZoom();
});

function setZoom(){
    var scale = $(window).width() / HTML_WIDTH * 100 + "%";
    $('html').css({'zoom' : scale });
}

後はJSが画面サイズに合わせて勝手にHTMLを拡大/縮小してくれます。
画面を横にしても勝手にHTMLが画面サイズに合うように調整されます。

===[ 追記 ]======

bodyのwidth固定するなら、こっちの方がスマートかも。

JavaScript

$(function() {
    $(window).resize(function(){ setZoom() });
    setZoom();
});

function setZoom(){
    var scale = $(window).width() / $('body').width() * 100 + "%";
    $('html').css({'zoom' : scale });
}