A4 WORKS Official BLOG

A4 WORKS オフィシャルブログ

JavaScript

Androidブラウザでviewportのwidth指定(GALAXY 2.3系への対応)

投稿日:2014年11月10日 更新日:

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設定を使っています。


サーバサイドで処理を分けるなり、JavaScriptで条件分岐させるなどしてもらうとよいかと。
※画面サイズを640としてますが、320指定でも問題ないかと。
 

-JavaScript
-, ,

執筆者:

関連記事

PyCharmでES6対応する

PyCharmでjavascript(node.js)を変更しようとしたら構文は問題ないのにエディタ上の表示がエラー扱いでどうも使いにくい状況でした。 間違ってないけどエラー扱い 省略系のダブルアロー …

JSテンプレートエンジンhandlebars.jsを使ってみる その2

以前のエントリ、JSテンプレートエンジンhandlebars.jsを使ってみるのその2です。 handlebarsはプリコンパイルして使わないとパフォーマンスに難点があるので、ぜひとも使いたい所です。 …

JSテンプレートエンジンhandlebars.jsを使ってみる

いまま関わったプロジェクトではスマホ、フィーチャーフォンの両方対応がほとんどで、処理を共通化する為にSmarty等のサーバサイドのテンプレートエンジンを使う事で概ね問題なく対処できていたわけす。 フィ …

JavaScriptでオブジェクトの要素数を取得する

JavaScriptでオブジェクトの要素数を取得します。 https://gist.github.com/akifumi-kamata/092cde0876890a62cb23  

AndroidのparseInt(javascript)で"01234"が668になる

var x = ‘01234’; var y = parseInt(x); console.log(y); // 668? 結論としては、Androidだけ文字列の先頭が”0″ …