BinaryDevelop
  1. ホーム
  2. html

モバイル向けメタタグ - 使うべきか？

2023-10-16 21:04:41

質問

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

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

モバイル最適化

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

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

概要

使用方法 viewport ただし が必要です。 をサポートしていない古いフィーチャーフォンをサポートする必要がある場合、おそらく HandheldFriendly と MobileOptimized の両方を使用することになるでしょう。 ターゲット デバイスをテストして .

使用すべきなのか？いつ、どこで使うのが適切ですか？ユーザーエージェントを認識しない）代替手段はありますか？

一般的には、使用するデフォルトのズームを携帯電話に伝える、リサイズを制御する、などです。たとえば、viewport を使用する理由については、これが良い説明となります。 http://davidbcalhoun.com/2010/viewport-metatag - また、viewport で設定できる他のプロパティとその役割もリストアップされています。

これらのメタタグを使用せずにこれらの効果を達成する唯一の他の方法は、ファンキーな JS トリックを使用することです。をサポートしていないブラウザでは viewport をサポートしていないブラウザは、おそらくビューポート関連のものに対して非常にバギーな JS インターフェースを持つことになるでしょう; 以下の quirksmode リンクを参照してください。

リファレンス

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します