1. 横の隙間 (空白) をなくしたい
iPhone の画面に最適化されていないサイトを見ると、コンテンツの両脇に隙間 (空白) ができることがある。
例えば、Open Source Web Design - Three Quarters > Three Quarters は、スマートフォンに最適な表示がされない。iPhone で表示すると、左下の画像のように表示される。コンテンツの両脇に不要な空白ができてしまう。
これを右下の画像のように、できるだけコンテンツを表示するように、両脇の隙間を取り除きたい。
 |  |
2. このテンプレートにおける HTML の構造
最初にこのテンプレートにおける HTML の構造を把握しておく。
コンテンツを囲む全体の幅は、body タグに対する CSS の指定で 850px の固定幅が指定されている。body タグの背景画像として、コンテンツ部分の白色と、影を含めた両脇に対応した画像が設定されている。
body タグ直下の div タグは 700px の横幅。影を除いた白色の部分の幅を測ると約 750px。
両脇に影のあるデザインは古めかしく、簡単な変更で済ますために、予め、デザインをフラットなものに変更した。そのためには、CSS ファイル (screen.css) の body タグに対する背景の画像を削除。そして、背景の色を白に指定。幅を 750px に変更した。
- body タグに対する CSS の指定
- background-image を削除
- width: 750px;
- background-color: #fff;
これにより、以下のような表示となる。
3. Viewport とは表示される領域のこと
iPhone では横幅 980px として表示される
iPhone でサイトを見ると、横に隙間ができる理由は、iPhone に搭載されたブラウザの仕様による。
iPhone ではサイトに何も指定がなければ、PC のブラウザで横幅 980px の領域が表示できるウィンドウの大きさにしたときと同じように見える。iPhone では、PC のブラウザのようにウィンドウの大きさを変更するという操作がないため、横幅が固定されている。
iPhone用にサイトの幅と画面の幅を合わせるには によると、
iPhone4やiPhone4Sは、解像度が横980pxなので、… PC用に作られたPCサイトを表示させると、… 読みにくい表示になるだけでなく、右横に隙間が表示されてしまいます。
たとえば、… 横幅が900pxで作成しているため、80px分の隙間が出来てしまっています。
上例のサイトを PC 上のブラウザで 980px の横幅にして見てみると、以下のように表示される。
PC のブラウザと iPhone での表示を拡大縮小して重ね合わせると、表示されている領域が一致することが確認できる。
viewport
このような表示に関する概念として覚えておく言葉は `Viewport’.
viewport とは、現在見ている矩形領域のこと。ブラウザで言えば、ウィンドウ内に表示されている領域に相当する。たとえるなら、覗き窓。
viewport – Wiktionary によると、
(computer graphics) A rectangular region representing the range or area currently being viewed.
iPhone では、画面の解像度と、表示される領域が異なることに注意すること。また、Android では事情が異なってくる。
スマートフォン時代のWebサイト制作 第2回 スマートフォン特有の表示環境を理解する | デベロッパーセンター
例えば、iPhoneではどうでしょうか。結論から言うと、iPhoneでは“何もしなければ”横幅980pxでウェブサイトが表示されます。iPhoneのスクリーンはデスクトップのスクリーンのようには大きくないのに、なぜそのようになるのか不思議に思うかもしれません。ここで理解しないといけないのが「Viewport（ビューポート）」です。…
Viewportとはブラウザーの画面表示領域のことです。もう少し分かりやすく言えば、デスクトップでいうところのブラウザーウィンドウ上の表示サイズです。スマートフォンではデスクトップのようなリサイズできるウィンドウの概念はないため、その機種のスクリーンサイズがブラウザーウィンドウのサイズとなります。この通り素直に考えれば、iPhoneの3.5インチスクリーンの横幅320pxに合わせてViewportも320pxとなると考えてしまうのですが、実際にはこれが980pxとなります。
なぜそのようになっているかというと、スマートフォンブラウザーはデスクトップ向けサイトを閲覧できるのが特徴です。そのため、既存のウェブサイトをちょうど画面に収まるようにするには、Viewportのサイズをデスクトップ相当にしておく必要があります。
ちなみにAndroidの場合は、その機種のスクリーン幅以上のコンテンツでも、スクリーンに収まるように表示されます。
4. meta タグの viewport で幅を指定
width=device-width
viewport を指定するには、meta タグを利用する。
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ - てっく煮ブログ によると、
「スマホ向けにデザインしているよ」と主張するには
<head>タグの中にviewportを 1 行追加すればよい。<meta name="viewport" content="width=device-width">
width=device-widthというのは「デバイスの横幅で描画してください」という意味である。一昔前は iPhone 前提で
width=320pxと指定すれば十分だったが、解像度がまちまちな Android やタブレット端末が登場したため、width=device-widthと指定するのが新常識になった。
HTML5/ページ全般/meta要素 表示領域を設定する - TAG index Webサイト によると、
meta要素に
name="viewport"を追加すると、文書の表示領域を設定することができます。…content属性の値には、以下のプロパティを指定することができます。
width=表示領域の幅 数値 ピクセル数 （ 200～10000の範囲、初期値は980）device-width端末画面の幅に合わせる
これより、viewport に
- width=device-width
を指定した。その結果、iPhone でコンテンツが納まらなかった。横幅は、PC 上のブラウザで幅 640px を指定したときと同じようだ。
width=[幅をピクセル数で指定]
これに対して、blog.鶯梭庵/links/たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる によると、
先に結論を書いておく。適切な設定は、ページ幅が固定されているウェブページの場合、viewport meta タグを書かないか、
<meta name="viewport" content="width=(幅をピクセル数で指定)">とする。ページ幅が可変（リキッドレイアウトとか RWD とか）のウェブページの場合、
<meta name="viewport" content="initial-scale=1.0">とする。
そこで、iPhone に表示する領域として、body タグの幅を viewport の width に指定した。
<meta name="viewport" content="width=750">
これにより、iPhone でコンテンツが隙間なく納まるようになった。
5. スマホサイトにおける viewport の設定に対する考え方
スマホサイトに対する設計には 2 つの考え方がある。
一つは全体を俯瞰し、必要に応じて拡大縮小するタイプ。もう一つは、ユーザによる拡大縮小操作を禁止し、スマホに特化した表示をすること。
それぞれ一長一短があるので、サイトの目的に合わせて最適化するのが良いようだ。
pxt | 考察：Appleはスマホサイトを作らない。 によると、
今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。…
Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に
width=1024が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする…小さな画面でありながらページ上の構成要素の全体を一目で把握して、自分が必要な情報に、直感的なダブルタップの操作でフォーカスできる。興味の順に次々読み進められるし、斜め読みだってできてしまう。
これが、Appleが掲げたモバイルサイトのデザインであり、Mobile Safari のUI設計の本質なのではないだろうか。
スマートフォン時代のWebサイト制作 第2回 スマートフォン特有の表示環境を理解する | デベロッパーセンター によると、
またmeta viewportでは、他にもユーザによる拡大／縮小操作の倍率を指定したり、拡大／縮小操作自体を禁止することもできます。Yahoo! JAPANやlivedoorなどのサイトでは、下記のようにユーザによる拡大／縮小操作ができないようにしています。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
ケースバイケースではありますが、これらはユーザによる任意の操作を禁止することになるので、筆者としてはあまり好ましい指定と考えてはいません。「ユーザにも親切である」という意図がなければ、この制限のある指定は避けるようにしましょう。
参考サイト
- mediaQuery における max-width, max-device-width の違い | girigiribauer.com
- Viewportのinitial-scale=1とwidth=device-widthの関係 ::ハブろぐ
- iPhone/iPad/iPad mini用メディアクエリ一覧 | ENTEREAL/エンタリアル
- Viewport と Media Queries に関するメモ | Web Design Leaves
0コメント:
コメントを投稿