スマートフォンサイトの表示サイズを最適化する方法

こんにちは、デザイナーの吉澤です。

Webサイトのレスポンシブ化により、マルチデバイス対応が進む昨今、
まだまだ、PCサイトとスマートフォンサイトの2サイト展開で運用をされている企業様も多いのではないでしょうか？

今回は、そんなスマートフォンサイトで、スマートフォンデバイスの画面横幅いっぱいに拡大表示させる方法をご紹介します。

※iOS（320px）基準でのコーディング例

HTML viewport

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

Javascript

$(function(){
var portraitWidth,landscapeWidth;
$(window).bind("resize", function(){
if(Math.abs(window.orientation) === 0){
if(/Android/.test(window.navigator.userAgent)){
if(!portraitWidth)portraitWidth=$(window).width();
}else{
portraitWidth=$(window).width();
}
$("html").css("zoom" , portraitWidth/320);
$("html").css("zoom" , $(window).width/320);
}else{
if(/Android/.test(window.navigator.userAgent)){
if(!landscapeWidth)landscapeWidth=$(window).width();
}else{
landscapeWidth=$(window).width();
}
$("html").css("zoom" , landscapeWidth/320);
$("html").css("zoom" , $(window).width/320);
}
}).trigger("resize");
});

CSS

html {
margin: 0 auto;
padding: 0;
width: 320px;
height: 100%;
overflow: scroll-y;
}

まとめ

今回はJavascriptのzoom利用してデバイス画面の横幅いっぱいに拡大表示させています。
是非、一度お試しください。

但し、一部のAndroid端末ではzoomが機能しない（firefox OSは未対応）場合がありますのでご注意ください。