メタタグ「Viewport」、「MobileOptimized」、「HandheldFriendly」を使用して、適切にフォーマットされた HTML コンテンツをモバイル デバイスに提供できます。これらのタグは良いものですか？多くの場合、それらはかなりプラットフォーム固有のように見えます。また、プラットフォーム固有 (ビューポート) ではない場合でも、適切に機能するにはデバイス固有の属性が必要なようです。
それらを使用する必要がありますか？それらをいつ、どこで使用するのが適切ですか？代替手段はありますか (ユーザーエージェントの認識なし)?
注: モバイル サポートを実現するために CSS メディア クエリを使用してきましたが、フォント サイズを最適化するには UAR が必要です。
簡単な答えは次viewportのとおりです。
viewportは、広くサポートされている事実上の標準です。もともと Apple が iPhone のモバイル Safari 用に作成したもので、他のほとんどすべてのモバイル ブラウザで採用されています: Opera Mobile、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"/>
これは Windows 独自のメタ タグであり、最終的にはモバイル コンテンツを識別する別の手段としても使用されるようになりました。このタグの欠点は、特定の幅を指定する必要があることです。繰り返しますが、このタグのサポートが何であるかは不明です:
<meta name="MobileOptimized" content="320"/>
サポートしていない古いフィーチャー フォンをサポートする必要viewportがない限り使用します。その場合は、おそらく HandheldFriendly と MobileOptimized の両方を使用しますが、ターゲット デバイスをテストして確認してください。
それらを使用する必要がありますか？それらをいつ、どこで使用するのが適切ですか？代替手段はありますか (ユーザーエージェントの認識なし)?
これらは、作成する効果が必要な場合に使用する必要があります。通常、使用するデフォルトのズームを電話に伝えたり、サイズ変更を制御したりします。これは、ビューポートを使用する理由の良い説明です。 davidbcalhoun.com/2010/viewport-metatag - ビューポートで設定できるその他のプロパティとその機能もリストしています。
これらのメタタグを使用せずにこれらの効果を達成する唯一の他の方法は、ファンキーな JS トリックを使用することです。これは遅くなり、スクリプトの読み込みが必要になり、保守が難しくなり、信頼性が低くなります。サポートしていないブラウザーはviewport、ビューポート関連のものへの非常にバグのある JS インターフェイスを持っている可能性があります。以下の quirksmode のリンクを参照してください。
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" />
あなたにとって興味深いかもしれないもう 1 つの記事は、A list Apart: " Put Your Content in My Pocket " です。