☰

モバイル用のメタタグ – 使用すべきか? 質問する

tag-icon • tag-icon html mobile-website
モバイル用のメタタグ – 使用すべきか? 質問する

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

これらは使用すべきでしょうか? いつ、どこで使用するのが適切でしょうか? 代替手段はありますか (ユーザー エージェントの認識なし)?

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

ベストアンサー1

簡単な答えは、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 ブラウザでモバイル コンテンツを識別するために使用されていましたが、モバイル ウェブサイトを識別するための一般的な標準になりました。ただし、どの範囲のブラウザがこのメタ タグをサポートしているかは不明です。

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

モバイル最適化

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

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

まとめ

使用viewportしない場合は必要それをサポートしていない古いフィーチャーフォンをサポートするには、おそらくHandheldFriendlyとMobileOptimizedの両方を使用しますが、対象デバイスをテストして調べる。

これらは使用すべきでしょうか? いつ、どこで使用するのが適切でしょうか? 代替手段はありますか (ユーザー エージェントの認識なし)?

これらは、作成する効果が必要な場合に使用してください。一般的には、携帯電話に使用するデフォルトのズームを指示したり、サイズ変更を制御したりします。これは、ビューポートを使用する理由の適切な説明です。次に例を示します。http://davidbcalhoun.com/2010/viewport-metatag- また、ビューポートで設定できるその他のプロパティとその機能も一覧表示されます。

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

参考文献

おすすめ記事