web-dev-qa-db-ja.com

メタビューポートタグはどのように使用され、何をしますか?

  1. このメタタグをサポートしているブラウザは何ですか?
  2. どうやって使うの?
  3. これは、モバイルのサイズ変更に関するすべての問題を解決するという意味ですか?

誰かがこれに答えることができれば、それは初心者の学習に大きな助けになるでしょう

<meta="viewport">
25
Kyle Yeo
  1. ビューポートブラウザのサポートは、全体的に少しです。詳細については ビューポートブラウザサポートのQuirksmodeページ を参照してください。
  2. 他のメタタグと同様に、ビューポートメタタグを使用します。コードブロックを<head>に直接入れます。
  3. かなり多くのことを言いますが、ここでも、少し口に出して言ってください。 いくつかの記事を読むWebデザインのW3モバイルのベストプラクティスを読む 、または <meta>タグのビューポート属性の現在のW3ドラフト仕様)

つまり、ビューポートスケーリングを実装する必要があるWebサイトにこの行を追加すると、ほとんどの問題が解決されます。 ( WebDesignTuts +の「クイックヒント:ビューポートメタタグを忘れないでください」の記事からコピー

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

追伸Quirksmodeには 問題を説明するかなり素晴らしい記事 もあり、これがなぜ役立つかを理解するために読む価値があります。

21
Nightfirecat

メタビューポート、そのさまざまなプロパティ、およびデザインでの使用方法に関する別の記事は http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport /

slidedeck で物事を詳細に説明し、それに合わせて Github repo もあります。

免責事項:私はこれらのリソースの作成者です。

6
andreasbovens

Mozillaブログからすべての詳細を表示できます

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

3
Miqdad Ali

メタビューポートタグは、表示画面のサイズに応じてWebサイトのサイズと可視性を調整するために使用されます。これは、WebページがAndroid、タブレット、またはiPhoneに自動的に収まるようにします。

0