A4 WORKS Official BLOG

A4 WORKS オフィシャルブログ

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

      2014/11/11

Androidのviewport設定がバージョン依存や、端末依存の問題で最適化に困っていたところ以下のサイトを参考にさせて頂い対応していました。

続:Androidブラウザでviewportのwidth指定

ただ、2.3系のAndroid端末(GALAXY)は期待した動作をしない事象に当たりました。

元のソース転載です。

試行錯誤した結果、一度変数(portraitWidth)に入れるとなぜか期待した動作にならず、直接値を渡すと期待通りの挙動になります。
$(“html”).css(“zoom” , $(window).width() / 640 );

簡易に実装&修正したサンプルコード

縦持ち、横持ちに関わらず固定にて対応させた簡易版です。

iPhone,iPadへの対応

iPhone,iPadへの対応は以下のviewport設定を使っています。

サーバサイドで処理を分けるなり、JavaScriptで条件分岐させるなどしてもらうとよいかと。

※画面サイズを640としてますが、320指定でも問題ないかと。

 

 - JavaScript , ,

STINGERレクタングル大

STINGERレクタングル大

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事

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

結論としては、 …

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

いまま関わったプロジェクトではスマホ、フィーチャーフォンの両方対応がほとんどで、 …

javascript
Javascriptの基本的な事を改めてメモ

最近Javascriptを触る機会が多くなり、つい忘れがちな基本をメモ。 型変換 …

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

JavaScriptでオブジェクトの要素数を取得します。   関連

javascript
JavaScriptでundefinedと向き合ってみる

前回エントリのNaNの判定と趣はにていますが、今回はundefinedと向き合っ …

javascript
JavaScriptでNaN(Not a Number)を判定して適切に処理する

引数や入力された値などをintなど数値にキャストする際に予期せぬ値が入っていると …

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

以前のエントリ、JSテンプレートエンジンhandlebars.jsを使ってみるの …

javascript
JavaScriptで遅延処理をさせる

遅延実行(タイマー処理)が必要な場合にはsetTimeoutを使用します。 se …