コメント：この記事の編集者は、HTML5を使用してWindows 8のWebサイトのサポートを実現する方法を紹介します。必要に応じて、それを参照してください
まず、Windows 8のサポートについて学びましょう。Windows8のMetroアプリケーションは画面を非常によく分割できます。次の図
これにより、ユーザーは使用中に非常に簡単に切り替えることができます。システムには、添付ファイルに関する厳格な規制もあります。最大の2つの画面では、1つは大きく、もう1つは小さいです。また、小さな画面の幅は320ピクセルに固定されています。
そのため、ユーザーがウェブサイトを小さな画面に投稿すると、デフォルトでページが比例して減少します。下の図に示すように：
それでは、どうすればそのような問題を非常にうまく解決できますか？ Windows 8の小さな画面の下で、ウェブサイトを非常に友好的な効果に示すことはどうですか？以下に簡単な例があります
写真に示されているように、水平に配置されたナビゲーション、コンテンツなどを含む非常にシンプルで伝統的なページ。
また、従来のコードにも同じことが言えます
<！doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style>
.nav {
パディング：5px 0px 5px 0px;
マージン：0px;
幅：100％;
リストスタイルタイプ：なし;
背景色：＃CDDCD6;
高さ：28px;
}
.nav li {
マージン：0px 1px 0px 0px;
フロート：左;
バックグラウンドカラー：＃0094ff;
パディング：5px 10px 5px 10px;
}
.dvitem {
幅：100％;
高さ：400px;
バックグラウンドカラー：＃b6ff00;
クリア：両方;
}
。主要 {
幅：960px;
マージン：0px auto 0px auto;
}
</style>
</head>
<body>
<div>
<ul>
<li>ホーム</li>
<li> item1 </li>
<li> item2 </li>
<li> item3 </li>
<li> item4 </li>
</ul>
<div>
</div>
</div>
</body>
</html>
このようなページは、図に示すように、固定効果で削減されます。
それを変更する方法は？このような従来のページでは、Windows 8のリレー特性に基づいてCSSを作成するだけです。ページをレイアウトして、幅320ピクセルで表示します。
実装コードは次のとおりです。次のスタイルコードを元のページに追加します
@mediaスクリーンと（max-width：320px）{
@-ms-viewport {width：320px; }
.nav {
パディング：5px 0px 5px 0px;
マージン：0px;
幅：100％;バックグラウンドカラー：#fff;
}
.nav li {
幅：300px;
クリア：両方;
マージン：0px 0px 1px 0px;
バックグラウンドカラー：＃0094ff;
パディング：5px 0px 5px 0px;
}
.dvitem {
幅：95％;
高さ：600px;
バックグラウンドカラー：＃ff00a4;
クリア：両方;
}
。主要 {
幅：320px;
マージン：0px auto 0px auto;
}
}
フルスクリーンブラウジングと従来のブラウジングに違いはありません。
違いは、次の図に示すように、小さな画面に貼り付けると、ディスプレイ効果が明らかであることです。
このサンプルコードダウンロード/ファイル/リスク/index.rar