to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

iOS6からviewportにinitial-scale設定時の端末回転挙動が変わった

こんにちは。x-fitチーム・エバンジェリストの渡辺です。先日、こちらの記事で、端末を回転させたときの挙動を、viewportの設定別にご紹介しましたが、iOS6にアップデートした後、viewportの属性に、initial-scaleを設定したときの挙動が変わりましたので、改めてご紹介します。
 
 
 
以下のようなHTMLを表示したとき、iOSのバージョンによって、端末を回転させたときに、次のような挙動をするようになりました。
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
  content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body background="./img/back.png">
<p>このコンテンツは、リキッドデザインのコンテンツです。幅指定はせず、単純にpタグの中に文章を書き連ねています。このコンテンツは、・・・・・・・・・・・(以下略)</p>
</body>
</html>

iOS5までの挙動

 
詳細は、前回の記事に譲りますが、viewportの属性に、initial-scaleを設定すると、縦から横に回転させたとき、コンテンツの幅は320pxから480pxに変わり、画面には320px分だけが表示されていました。そのため、画面上は1.5倍ほど拡大したように見えていました。
 
 

iOS6での挙動

 
縦から横に回転させたとき、コンテンツの幅が320pxから480pxになるのは変わりませんが、表示される範囲も480px分になったため、画面は拡大せず、コンテンツすべてが一度に見えている状態になりました。(画面はiPhone4Sのものです)
 
 
 

iPhone5での挙動

iPhone5での挙動は、iOS6の場合と基本的には変わりません。画面サイズが変わっているため、横に回転させたときの表示される範囲が568px分になります。
 
 
 

まとめ

 
もともとの拡大される挙動は、iOSだけにみられるものでした。回転すると勝手にズームしてコンテンツの一部しか表示しない、というのは、使い勝手からするとあまりよくないものでしたので、これまでは、Javascriptでfixするように制御したり、ユーザスケールを制限したりと、いろいろと制作側で対応に腐心されているという話をよく聞きます。
iOSの場合はOSアップデートの対象端末も幅広く、アップデートされる方も大多数に及ぶと思われますので、回転時の表示については、悩まなくても済むようになりそうですね。
 
 
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。
タグ: 
このエントリーをはてなブックマークに追加