テスターですが何か?

ホビープログラマ略してHPです

【日本語訳】ASP.NET MVC4 Mobile Features Part2 CSS Media QueriesとViewPortMetaタグ

leave a comment »

このエントリーはASP.NET公式サイトのチュートリアル「ASP.NET MVC4 Mobile Features」の日本語訳になります。このコンテンツ、日本語訳の全体についてはこちらのエントリーを参照してください。

 

CSS Media Queries

CSS Media QueriesとはCSS Media Typesの拡張です。CSS Media Queriesを使うことでデフォルトのCSS定義を上書きした、特定のブラウザ(User-Agent)向けのCSS定義を作成することができます。モバイル用ブラウザを対象とした共通のCSS定義は最大画面サイズを規定しています。ASP.NET MVC4 インターネットプロジェクトの「Site.css」には、以下のMedia Queryが含まれています。

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

ブラウザのウィンドウ横幅が850ピクセル以下であれば、mediaブロック内のCSS定義が適用されます。CSS Media Queriesはこのようにデスクトップブラウザ向けのCSS定義を上書きして、モバイル用ブラウザでのHTMLコンテンツ表示を最適化させるために使用することができます。

 

The Viewport Meta Tag

Viewportとは、多くのモバイル用ブラウザで定義されている、実際のデバイスサイズよりも大きい仮想のウィンドウサイズ(横幅)のことです。このViewportによって、モバイルブラウザの仮想ディスプレイ内にWebページのすべてを表示することができます。ユーザーは見たいコンテンツにズームインすることができますが、Viewportの横幅を実際のデバイスの横幅に合わせれば、ズームの必要はありません。コンテンツがモバイルブラウザにきっちり収まっているからです。

ASP.NET MVC4では、レイアウトファイル(_Layout.cshtml)内の<meta>タグでViewportをデバイスの横幅と同じサイズに設定しています。以下の一行が、ASP.NET MVC4のレイアウトファイル(_Layout.cshtml)のViewPort設定<meta>タグです。

<meta name="viewport" content="width=device-width">

 

CSS Media QueriesとViewport Metaタグの効果を検証する

エディタで MvcMobile\Views\Shared\_Layout.cshtml ファイルを開き、Viewport <meta>タグの部分を以下のようにコメントアウトします。

@*<meta name="viewport" content="width=device-width">*@

MvcMobile\Contens\Site.css ファイルを開き、Media Queryの最大横幅設定を0ピクセルに変更します。この変更により、CSS定義がモバイル用ブラウザに適用されなくなります。

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

変更を保存し、会議リストアプリをモバイル用ブラウザで表示します。Viewport<meta>タグを外したことにより、以下の画面キャプチャのように小さな文字で表示されるようになります。Viewport<meta>タグがないため、ブラウザはデフォルトのViewportの横幅(多くのブラウザは850ピクセル以上)にズームアウトして表示しています。

20111110-230621

変更を元に戻してください。Viewport<meta>タグのコメントアウトを解除し、Media Queryを850ピクセルに戻してください。ファイルを保存し、モバイルブラウザで再読み込みを行なって、モバイル用の表示に戻っていることを確認してください。

Viewport<meta>タグやCSS Media QueriesはASP.NET MVC4に特化した内容ではありません、どんなWebアプリケーションにもこれらの機能を利用することができます。ただ、ASP.NET MVC4のプロジェクトを作成すると、これらの機能は自動的に埋め込まれています。

Viewport<meta>タグについての詳細な情報は、「A tale of two viewports — part two」を参照してください。

次のセクションでは、モバイルブラウザに特化したViewの作成方法を紹介します。

Written by david9142

2011年11月10日 @ 11:18 PM

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。