Android向けサイトに必要最小限ないくつかのMETA(メタ)タグ

パソコン向けサイトをたくさんつくってきたおまいさんたちでも

Androidブラウザが認識できるみたことがないMETAタグがあったりします。

 

 

 

これらは、スマートフォンWEBサイトをつくるときには

大変便利なものだったりします。 


<meta name="viewport"
  content="
      height = [pixel_value | device-height] ,
      width = [pixel_value | device-width ] ,
      initial-scale = float_value ,
      minimum-scale = float_value ,
      maximum-scale = float_value ,
      user-scalable = [yes | no] ,
      target-densitydpi = [dpi_value | device-dpi |
                           high-dpi | medium-dpi | low-dpi]
   " />

 

それぞれサンプルコードをみてみます。

 

 

ビューポートの幅が正確にデバイスの画面の幅に合わせてズームする機能を無効にすることを必要があることを指定します。 

<meta name="viewport" content="width=device-width, user-scalable=no" />

 

あなたのWeb​​ページを正確に幅320ピクセルになるように設計されている場合、その後、ビューポートの幅のためにそのサイズを指定する必要がある場合があります。
 

<meta name="viewport" content="width=320" />

 

 正確なピクセルにビューポートの寸法を指定する代わりに、あなたは常に、それぞれ、値がデバイスの高さとデバイス幅とビューポートのプロパティの高さと幅を定義することによって、デバイスの画面の寸法に合わせてビューポートのサイズを設定することができます。 

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

 
ビューポートの尺度は、Webページに適用されるズームのレベルを定義します。ビューポートのプロパティを使用すると、次の方法でWebページの縮尺を指定することができます

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

 

 異なる画面密度用のWebページをスケーリングからAndroidのブラウザとWebViewのを防止するため、デバイス解像度にターゲットdensitydpiビューポートのプロパティを設定します。これを実行すると、ページが拡大縮小されません。その代わりに、ページが現在の画面の密度と一致するサイズで表示されます。このケースでは、あなたがまた、デバイスの幅に合わせて、ビューポートの幅を定義する必要があります、あなたのWeb​​ページが自然に画面のサイズに合うように。

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

これらのスマートフォン独自の

メタタグを使うことによって、サイズが異なるandroid端末にも

うまく対応した画面が作成できたりします。

 

(追記:こんなこともできるようになってる!!)
Android標準ブラウザとなった Chrome を使っていれば来るであろう幸せのショートカッツ Android標準ブラウザとなった Chrome を使っていれば来るであろう幸せのショートカッツ


関連ワード:  Android開発