スマートフォンで横向きにすると拡大されるのを回避するには…

Posted by specterant on 2012.05.31

スマートフォンでWebサイトを閲覧するとき、横向きにしたりすることがあると思います。
そんな時、ページが拡大されて表示されることがあります。
あ、ちなみにiPhoneで起きるんですが、これを回避するにはmeta要素に下記を追加します。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
これで、画面幅にフィットしますが、maximum-scale=1を指定するとページの拡大・縮小ができなくなります。
どちらかを優先させるかと選択を迫られるのですが、どちらも必須にしたいなぁ〜って時は…
はい!こちらのiOS-Orientationchange-Fixという素晴らしいものがあります。
これを読み込むと問題を解決してくれます。
<script src="./ios-orientationchange-fix.js"></script>
ありがとうございます!
Thank you!

A Fix for the iOS Orientationchange Zoom Bug | Filament Group, Inc., Boston, MA

No comments yet.

Write a comment:

WP-SpamFree by Pole Position Marketing