iPadのブラウザでPCサイトを閲覧する時、基本的には1024px分表示（つまりviewport content=”width=1024px”で表示されていると思っていた。
だから、縦向きでも横向きでも何も考えずにフィットしてくれている。これはある意味で正しい。
しかし、その他にも色々な処理をしてくれていて、ここで悩ましいことが起きる。
サイト全体が単一のコンテナで包まれている時は、ここのwidthを拾って、適度なサイズにスケーリングする。ちなみにスケーリングを適用したくなければ、initial-scale=1とすれば良い。ただしこの場合ポートレートで悩むことになる。縦向きの場合、768px分しか表示してくれなくなる。だから、initial-scaleなんか触らないのが吉。
問題は、外側にコンテナがなく、横フィットするようなサイトの場合。
この場合は、内側の構成要素からwidthを推定するのだが、おそらくマージン等が考慮されていない純widthを拾ってきて、そのwidthを基準にスケーリングされてしまう。結果、若干小さめのウインドウでレンダリングされ、コンテンツがはみ出してしまうことに。
今のところ、これに対する解法は見つかっていない。
考えられるのは、jsで縦横判定し、initial-scale=x.xを書き換えてしまうという、強引な方法。
もちろん、あまりこういった小細工はしたくない。
もっとも、ほとんどのPCサイトは何もしなくてもうまい具合に表示してくれるので、何かhtml上のコツがあるのではないかと思う。
コメント