web-dev-qa-db-ja.com

モバイル用のメタタグ–使用すべきですか？

メタタグ「Viewport」、「MobileOptimized」、および「HandheldFriendly」を使用して、モバイルデバイスに適切にフォーマットされたHTMLコンテンツを提供できます。これらのタグは良いものですか？多くの場合、プラットフォーム固有のように見えますが、プラットフォーム固有（ビューポート）ではない場合でも、適切に機能するにはデバイス固有の属性が必要なようです。

それらを使用する必要がありますか？それらをいつどこで使用するのが適切ですか？代替手段はありますか（ユーザーエージェントの認識なし）？

注：モバイルサポートを実現するためにCSSメディアクエリを使用していますが、フォントサイズを最適化するにはUARが必要です。

htmlmobile-website
64
brinxmat

簡単な答えは：viewportは良いですが、他は...あまり良くありません。

ビューポート

viewportは 広くサポートされている事実上の標準 -元々Apple iPhoneのモバイルSafariで作成され、他のほとんどすべてのモバイルブラウザーで採用されています：Operaモバイル、iPhone、Android、Iris、IE、BlackBerry、Obigo、Firefox

簡単な使用例：サイトをモバイルで全幅にします：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

他の2つは、「フィーチャーフォン」の古い事実上の「標準」です。これは、一般的にviewportをサポートするには古すぎます。

ハンドヘルド

このタグはもともとAvantGoブラウザーでモバイルコンテンツを識別するために使用されていましたが、モバイルWebサイトを識別するための一般的な標準になりました。ただし、このメタタグをサポートしているブラウザの範囲は不明です。

<meta name="HandheldFriendly" content="true"/>

MobileOptimized

これは、Windows独自のメタタグであり、最終的にモバイルコンテンツを識別する別の手段としても使用されるようになりました。このタグの欠点は、特定の幅を指定する必要があることです。繰り返しますが、このタグのサポートは不明です。

<meta name="MobileOptimized" content="320"/>

概要

need をサポートしていない古いフィーチャーフォンをサポートする場合を除き、viewportを使用します。その場合は、おそらくHandheldFriendlyとMobileOptimizedの両方を使用しますが、ターゲットデバイスをテストし、見つけます。

それらを使用する必要がありますか？それらをいつどこで使用するのが適切ですか？代替手段はありますか（ユーザーエージェントの認識なし）？

これらは、作成するエフェクトが必要なときに使用する必要があります。通常、使用するデフォルトのズームを携帯電話に伝えたり、サイズ変更を制御したりします。これは、ビューポートを使用する理由の良い説明です。たとえば、 http://davidbcalhoun.com/2010/viewport-metatag -ビューポートで設定できる他のプロパティとその機能もリストします。

これらのメタタグを使用せずにこれらの効果を達成する唯一の方法は、ファンキーなJSトリックを使用することです。これは遅く、スクリプトの読み込みが必要で、メンテナンスが難しく、信頼性が低くなります。 viewportをサポートしないブラウザは、おそらくビューポート関連のものへの非常にバグの多いJSインターフェイスを持っています。以下のquirksmodeリンクを参照してください。

参照資料

129
Duncan Lock

IPhoneはブラウザとしてSafariを使用します。これらには 開発者ページ があり、メタタグビューポートを使用する場合の情報を提供します。

たとえば、Webページが980ピクセルより狭い場合は、Webコンテンツに合わせてビューポートの幅を設定する必要があります

次のように使用されます。

<META name="viewport" content="width = 650" />

<META name="viewport" content="width = device-width" />

<META name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

あなたにとって興味深いかもしれない別の記事は、A list Apart： " Put Your Content in My Pocket "です。

4
Martin Thoma