iOSの横モードは縦モードの1.5倍
2011/03/31 | スマートフォン
最近JavaScriptの仕事をよくしている。PHPも面白い言語だと思っていたけど、JavaScriptも結構面白い。何より、フロントエンドであるブラウザで動作するから、メニューを動かしたり、アニメーションしてみせたりと、ビジュアルが楽しい。
で、今はiOSとAndroidの仕事（アプリではなくウェブ）。iOS（iPhoneでもiPadでも）、縦表示（ポートレート）の場合には正しく表示されているのに、横表示（ランドスケープ）の時に、HTMLの右や下がはみ出してしまうけど、その理由がわからない。諸事情でピンチ操作を無効にしているのだが、CSSで指定しているだけでなくてJavaScriptで画面サイズが切り替わったときにも自動的に表示幅等を変更するように指定しているのに。
調べてわかったことは、iOSでは、横表示は1.5倍で表示されるということ。viewportの指定で、minimum-scaleやmaximum-scale、initiali-scaleを全て1.0で固定してやることで回避できた。調べてみたら、いろいろあるようだ。
あとCSSでランドスケープ時とポートレート時で値を切り替えることも出来るようだ。
<linkrel="stylesheet"media="all and (orientation:portrait)"href="portrait.css"><linkrel="stylesheet"media="all and (orientation:landscape)"href="landscape.css">
それとかCSS内で切り替えたりとか。
@mediaalland (orientation:landscape){#banner{width:300px;}}ま、今回はiOSだけの問題だから・・・どうやって対応するか考えることにする。