■ ビューポートの設定
- - PR -
iPhone版Safariの独自仕様を理解するうえで一番混乱しやすいのが、ビューポートの振る舞いです。ビューポートとは、コンテンツが表示される領域のことです。デスクトップのWebブラウザでは、コンテンツの横幅が大きくてウィンドウ内に表示し切れない場合、ユーザーはウィンドウの枠をドラッグして広げる(あるいは最大化する)ことができます。
しかし、ビューポートの物理サイズは固定されているので、コンテンツの方を縮小/拡大することで、一度に表示する内容量を調節することになります。
・ ビューポートのデフォルト幅
iPhoneのスクリーン解像度は、ポートレート表示(縦位置)の場合、横320px、縦480pxです。デバイスを回転させてランドスケープ表示(横位置)にすれば、縦320px、横480pxになります。
そのうち、ステータスバー、URLテキストフィールド、ボタンバーといった要素を省いた残りの領域がビューポートになり、ポートレート表示では、横320px、縦356pxとなります。
画面4 ビューポートのサイズは320×356ピクセル |
つまりiPhone版Safariに最適化Webアプリケーションを作りたければ、横320px、縦356pxでちょうど収まるようなデザインにすればよいのです。これが一番確実な方法で、例えばビルトインされているウィジェット(「計算機」や「天気」など)はこのサイズぴったりに作られています。
しかしiPhone版Safariは、Webページを表示するとき、デフォルトで縮小表示を行います。具体的には、横幅を980pxとして表示します。これは、一般的なWebサイトの横幅が入り切るサイズとして設定されたスケールです。つまりビューポートのデフォルト設定は、(ポートレート表示の場合)横幅980pxということになります。
画面5 デフォルトでは横幅980pxで表示される |
・ ビューポートメタタグ
ビューポートの設定(ページの読み込み時にどのような拡大率でコンテンツを表示するか)は、ビューポートメタタグによって開発者が任意に指定することができます。ビューポートメタタグは次のような書式となり、HTMLのそのほかのmeta 要素と同様にhead要素内に記述します。
<meta name = "viewport" content = "width = 700"> |
この例の場合、Webページが読み込まれたときに、横幅700pxのページがぴったり収まる拡大率で表示されることになります。
画面6 横幅700pxのページを表示すると、デフォルトで余白ができる |
画面7 ビューポート幅を700pxに指定すればぴったり表示される。 |
もし、iPhoneの解像度に合わせて横幅320pxのWebページを作ったとしても、ビューポートのデフォルト幅は980pxですから、そのままだと縮小表示されてしまいます。ですから、正しく表示させるためには、ビューポートメタタグで横幅を320pxに指定しなければいけません。
その際、iPhone 1.1.1 以降では「device-width
」という値が指定可能になっており、これを指定すれば自動的に320px(そして将来登場するデバイスの横幅)と同等の設定になります。
<meta name = "viewport" content = "width = device-width"> |
画面8 「device-width」と設定してもぴったり表示される |
・ リキッドレイアウトとビューポート設定
リキッドレイアウト(コンテンツを包含するブロック要素の幅を%で指定したレイアウト)の場合、インライン要素は、ビューポートメタタグで指定した横幅内で折り返そうとします。例えばビューポートの幅を600pxに指定した場合、デスクトップ版のWebブラウザでウィンドウ幅を600pxにしたのと同様の表示になります。
画面9 横幅:100%。ビューポート幅:デフォルト(980px) |
画面10 横幅:100%。ビューポート幅:600px |
画面11 横幅:100%。ビューポート幅:device-width(320px相当) |
・ そのほかの設定項目
ビューポートメタタグでは、横幅(width)以外の値も設定できます。height(高さ)や initial-scale(初期表示時の拡大率)などです。これらの内1つでも設定すれば、それに応じてWebブラウザが自動的にほかの値を計算してコンテンツを表示します。
3/4 |
INDEX | ||
iPhone向けWebアプリを作ろう | ||
Page1 Safari Web Content Guide for iPhoneを読み解く iPhoneへの最適化とは、UIを最適化すること iPhone Human Interface Guidelines |
||
Page2 Safari Web Content Guide for iPhone ・ Web標準に対応 ・ 未対応の技術 ・ Webブラウザ判定 ・ フレームは避ける ・ 段組みやブロックを活用する ・ リソースの制約 |
||
Page3 ・ ビューポートの設定 ・ メタタグ/リキッドレイアウトとビューポート設定 |
||
Page4 ・ スタイルシート ・ iPhone内のほかの機能を呼び出すリンク デバッグ |
Smart&Social フォーラム トップページへ |
- 夏休みの自由研究にマイコンボードで「電子サイコロ」を作ったり、音楽プログラミングをしたりしてみよう (2017/7/24)
子ども向け電子工作&プログラミング用マイコンボード「chibi:bit」の基本的な使い方を紹介する企画。夏休みの自由研究に「電子サイコロ」を作ったり、音楽プログラミングをしたりしてみよう - 子ども向け電子工作&プログラミング用マイコンボード「chibi:bit」の基本的な使い方 (2017/7/20)
子ども向け電子工作&プログラミング用マイコンボード「chibi:bit」の基本的な使い方を紹介する。夏休みの子どもの自由研究などに役立てつつ、プログラミングを始めるきっかけにしてみてはいかがだろうか - 3DゲームのAIをiOSのSceneKitとGameplayKitで作る基本 (2017/7/10)
3Dゲーム用のフレームワークSceneKitを使った簡単なアプリ制作を通して、3Dゲーム用の人工知能(AI)について学ぶ - UnityアプリをWebGL、UWP、Android、iOS用としてビルドしてみた (2017/6/27)
アプリをWebで実行できるように書き出す方法やWindows上でUWP、Android、iOS用などにビルドする方法について解説する【Windows 10、Unity 5.6に対応】
|
|