サイトをさまざまなウィンドウ サイズに合わせる

Windows 8 Release Preview の IE10 では、W3C 草案の CSS Device Adaptation(英語) の幅と高さのプロパティがサポートされます。このため、Web 開発者は簡単なツールを使って、さまざまなウィンドウ サイズにおけるコンテンツの自動スケーリングを制御することができます。特に、スナップ ビューや縦長画面で Web サイトを Windows 8 Metro スタイル ブラウザーに簡単に合わせることができます。

自動スケーリングと使用するケース

ほとんどの Web サイトは、1024 ピクセル幅のウィンドウを優先して最適化されています。これにより、さまざまなディスプレイでブラウザーが最適化されたときに優れたユーザー エクスペリエンスが確保されます。ただし、他のウィンドウ サイズにも最適化 (英語) されていない場合、タブレットや縦長画面などの新しいフォーム ファクターにはサイトがうまく対応しないことがあります。特に、狭い幅で表示すると、ページが途切れたり、レイアウトがゆがむことがよくあります。

かなり狭いウィンドウに表示された TechCrunch と Wikipedia

この狭いレイアウトは特に Windows 8 では重要です。Metro スタイル ブラウザーのスナップ ビューは、まさにこの状態になるからです。スレート デバイスの縦長モードでも、フォーム ファクターが小さいためこのような状況になります。

Metro スタイル ブラウザーのスナップ ビューと縦長モードでは、レイアウト幅が 1024 ピクセル以上となるように既定で自動スケーリングされます。モバイル デバイスでは、狭いフォーム ファクターでモバイル用に最適化されていないサイトを表示したときに同様のアプローチ (英語) が採用されます。ほとんどのサイトは 1024 ピクセルで最適な動作となるように構築されているため、このアプローチにより既定で適切なレイアウトとなり、コンテンツが途切れなくなります。

スナップ ビューの Windows 8 Metro スタイル ブラウザーに表示された TechCrunch と Wikipedia

このアプローチにより、既定で優れたエクスペリエンスが確保されますが、ユーザーがサイトを読んで操作するには拡大する必要があります。

狭いウィンドウでうまく機能する

狭いレイアウトとして最も良いのは、Web 開発者によってオーダーメイドで作られたレイアウトです。この場合、サイトを狭い領域に合わせるだけでなく、画像サイズの変更、コンテンツの並べ替え、サイト ナビゲーションに使う代替ツール、またはコンテンツの他の基本的な変更が必要になることがあります。

狭いウィンドウに合わせた変更が既にサイトに加えられている場合、Device Adaptation を使って既定のスケールを上書きすることができます。

レイアウト適応の優れた例については、Media Queries (英語) をご覧ください。Metal Toad Media にも、市場に出回っているデバイス サイズや画面サイズに基づくレイアウト幅のサポート (英語) について説明するすばらしい記事があります。

@-ms-viewport を使う

スナップ ビューの簡単なサポート。 サイトが既に 320 ピクセル幅のレイアウトに対応している場合、スナップ ビューでそのバージョンを表示することを簡単に選択できます。Device Adaptation と CSS メディア クエリを組み合わせると、自動スケーリング機能を選択的に上書きすることができます。この CSS により既定の自動スケーリングが上書きされ、幅が 320 ピクセル以下のすべてのウィンドウには代わりに 320 ピクセルのレイアウトが一貫して適用されます。

@media screen and (max-width: 320px) {

@-ms-viewport { width: 320px; }

}

ウィンドウの幅が 320 ピクセル未満の場合、コンテンツはそれに合わせて縮小されます。たとえば、300 ピクセル幅のウィンドウではコンテンツが 93.75% の倍率で表示されます。幅がこれより広い場合、IE10 の標準のスケーリングが適用されます (たとえば、Metro スタイル ブラウザーが縦長モードになっている場合など)。

Device Adaptation は、非対応ブラウザーでは品質がやや低下します。そのようなブラウザーでも狭いレイアウトのサポートは活かされます。ウィンドウに合わせてコンテンツが自動スケーリングされないだけです。

縦長のサポート。 サイトで 768 ピクセル幅のレイアウトもサポートする場合、2 番目の viewport 規則で縦長モードのサポートを簡単に追加できます。

@media screen and (max-width: 320px) {

@-ms-viewport { width: 320px; }

}

 

@media screen and (min-width: 768px) and (max-width: 959px) {

@-ms-viewport { width: 768px; }

}

1024 ピクセル以上の幅 (横向き) に加えて、768 ピクセル (ほとんどのスレートの縦長モード) と 320 ピクセル (スナップされた Metro スタイル ブラウザー) のレイアウト幅でサイトをテストすることをお勧めします。 IE Test Drive サイトの Make it Snappy! デモでは、viewport 規則の動作例を確認することができます。

—Internet Explorer 担当グループ プログラム マネージャー Matt Rakow