スマートフォンサイトを作成する際、横向きの動作としては大きく二つに分かれます。一つは横向きでも文字や写真の大きさが”変わらない”動作、もう一つは横向きにした時に文字や写真の大きさが”変わる”動作。この後者の「横向きで拡大表示になる」動作、iPhoneや最近のAndroidなら、viewportを下記の通り書いておけば再現出来ます。
ただ困った事に、これだけだと一部のAndroid端末では横向きにしても文字や写真の大きさが変わりません。この現象はHTML側だけでは制御できないのですが、javascriptを使用する事でこれらのAndroidも同じ動作にする事ができます。下記はAndroidにのみ適用する書き方としています。
$(window).on('resize load', function(){
if(navigator.userAgent.search(/Android/) != -1) {
$("html").css("zoom" , $(window).width()/320 );
}
});
横向きで拡大となるスマートフォンサイトを作成する場合は是非お試し下さい。
