meta viewportがよくわからん
結局
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
が一番いいのかもと思った。html5 boilerplate mobileでも使われていたので…
以下はよく検証してないので間違ってる可能性があります。
まず、ほんとは
<meta name="viewport" content="width=device-width, initial-scale=1.0">
にしたい。想定される結果は、iPhone縦だとviewportの幅が320px、iPhone横だとviewportの幅が480pxになるというもの。だがこれをやると、iPhoneで縦→横にしたとき、コンテンツの幅は320pxのまま、これが幅いっぱいにズームされた状態になる。iPhone Safariは、基本、縦→横にしたら、その時の画面の幅を維持して拡大してくれるので、user-scalableがyesである限り、width=device-widthにしていたとしても、拡大されてしまうっぽい。これが仕様なのかどうなのか分からず。
拡大できないのはかなりイヤだが、縦→横にしたときに、デバイスの幅に合わせてリキッドレイアウトをさせるのはそうするしかないのかも?
なんかこういうのもあるので
追加: html5 boilerplate mobile の wikiに viewport 理解のためのノートがあった
もちっと調べた。
Safari Reference Library - Configuring the Viewport によると、デバイス回してもその時のviewportのwidthはキープされるとある。
Note that the portrait orientation is rendered in the same way as in Figure 3-14, but the landscape orientation maintains a width equal to device-width, which changes the initial scale and has the effect of zooming in when the user changes to landscape orientation.
mozillaによると、回転時にviewportをどうするかは今のところブラウザによってまちまちらしい。Safariは上記の通りの挙動、Fennecはそうではないとのこと。
Mobile browsers handle orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
This is not necessary in Fennec; when the device changes orientation, Fennec updates the viewport size, the page layout, and JavaScript/CSS properties like device-width, based on its new window dimensions.
大元の仕様とかは無くて、みんなAppleの真似してるだけなんだけど微妙に違うようで、とりあえず、クロスデバイスを考慮し、user-scalable=noにせずにviewportをdevice-widthに合わせてリキッド化するのは無理なんじゃないかと言う結論にいまのところ達した。
あとAndroidのviewportに関するドキュメント。
これって2.0以上だと効くよって書いてあるけど、ものによって効かない気がするのは実装抜けなのか何なのか分からん。
blog comments powered by Disqus