Androidのviewport設定がバージョン依存や、端末依存の問題で最適化に困っていたところ以下のサイトを参考にさせて頂い対応していました。
続:Androidブラウザでviewportのwidth指定
ただ、2.3系のAndroid端末(GALAXY)は期待した動作をしない事象に当たりました。
元のソース転載です。
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 );
}else{
if(/Android/.test(window.navigator.userAgent)){
if(!landscapeWidth)landscapeWidth=$(window).width();
}else{
landscapeWidth=$(window).width();
}
$("html").css("zoom" , landscapeWidth/320 );
}
}).trigger("resize");
試行錯誤した結果、一度変数(portraitWidth)に入れるとなぜか期待した動作にならず、直接値を渡すと期待通りの挙動になります。
$(“html”).css(“zoom” , $(window).width() / 640 );
簡易に実装&修正したサンプルコード
https://gist.github.com/akifumi-kamata/57e87d573677db251abc
縦持ち、横持ちに関わらず固定にて対応させた簡易版です。
iPhone,iPadへの対応
iPhone,iPadへの対応は以下のviewport設定を使っています。
<meta name="viewport" content="width=640, user-scalable=no" />
サーバサイドで処理を分けるなり、JavaScriptで条件分岐させるなどしてもらうとよいかと。
※画面サイズを640としてますが、320指定でも問題ないかと。