実数viewportでスマフォ画面にぴったり合わせた

androidはデフォルトブラウザ、firefox、chrome、operaがあると思いますが、
viewportにwidth=640としたい場合の設定方法です。
※なお、メモを見ながら記事を書いているのでうろ覚え。

目的

仕事で作っているAndroid、iOSアプリのWebViewでページを表示します。
WebViewで使われるブラウザは次の通り。
Androidはデフォルトブラウザ。Nexus7はchrome。
iOSはSafari。

失敗例

ケース1

デフォルトブラウザのみ倍になる\(^o^)/オワタ

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

ケース1は通常のパターンだと思う。
デフォルトブラウザでは640pxで表示した、画面にあわせて比率維持してリサイズするとかじゃないらしい。
どういうことかというとinitial-scaleいれてることが640pxで表示してしまうらしい。

ケース2

デフォルトブラウザでうまくいった!?iphoneはだめだったかな


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

ケース2は偶然みつけたハック技。。。?
ハックになってなさそうだけど、結局使わなかったので調べていない
initial-scale=””とする事でデフォルトブラウザではそれ以無視される。タグが終わったと勝手に誤解するぽい?
まぁ、使う事はないと思う。。。

Androidデフォルトブラウザはこれでいいのを確認

<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

user-scalable=noがあると駄目らしい事が分かって取りました。

iPhone

<meta name="viewport" content="width=640,user-scalable=no">

iphoneはinitial-scale系統いらなそうだった。

総合して・・・

<meta name="viewport" content="width=640">

結局こんなに短く|←樹海|     ┗(^o^ )┓三

JSは使う必要あるのか?

最初はJSで西畑先生のJSを使っていたのですが、遷移ごとにかくつく。。。
最終奥義だと思います。
なので、上記の書き方で動くのであればJSはいらないんじゃないかと思います。

なお、私はアプリでピンチアウトの設定を切れるからいいのですが、
普通のブラウザだとできちゃうのかもしれません。
でも、変にJSいれるよりはずっとずっといいと思います。
640pxの比率を維持して小さくて見えない部分は拡大したほうが、
ユーザビリティ高いと思いますしね。
それに640pxでデザインができていいじゃないですか。

device-widthを使うのはレスポンシブの時と西畑
先生のJS
を使う時だけでいいと思います。

参考ページ
続:Androidブラウザでviewportのwidth指定
http://blog.webcreativepark.net/2012/01/06-110622.html