HTMLのメタタグ(viewport)の設定で違うサイズのブラウザにコンテンツ表示の最適化

• PC・タブレット・モバイルのブラウザのサイズがそれぞれ違います
• コンテンツレイアウトをそれぞれのサイズに対応しきれないことがよく起きます
• メタタグ(viewport)の設定より、ある程度コンテンツの表示に最適化することができます
  • 例：メタタグ(viewport)の設定
    

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

  • メタタグ(viewport)設定あり/なしのコンテンツ表示結果は以下のようです
    
• 写真と文字だけのコンテンツを違うサイズのブラウザに最適化することが比較的に簡単ですが
  • 表、カラムなどがある複雑なレイアウトのコンテンツではこのメタタグ(viewport)だけでは表示最適化することが難しいです

メタタグ(viewport)の幅設定に固定な値を避けたほうが良い

• viewportの幅設定(width)に固定値の使用ができます
  • 例：<meta name="viewport" content="width=450, initial-scale=1.0">
• widthに固定値を入れると、特定なサイズに対応できますが、ほかのサイズのブラウザに適応できなくなる恐れがあります
• ブラウザの幅に合わせた設定にしたほうが良いでしょう
  • 例：<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • "width=device-width”：ブラウザの幅に応じてコンテンツ表示の最適化をしてくれます

メタタグ(viewport)のスケール(initial-scale)設定に注意

• ”initial-scale=1.0”： コンテンツの拡大/縮小はしないです
• ”initial-scale=0.5”：コンテンツを縮小して表示します
• 縮小表示する場合、倍率よりコンテンツの字が読みづらくなることがありますので、注意する必要があります
• 一方、拡大して表示すると、文字が大きくなって、コンテンツの内容を表示しきれなくなることがあります

メタタグ(viewport)とcss(media)を併用すればより効果的

• メタタグ(viewport)だけでは、コンテンツを違うサイズのブラウザに最適に表示することに限界があります
• css(media：ブレイクポイントの設定)で違うサイズのブラウザに対してコンテンツレイアウト設計を行います
  

  
  
  <!--  例：media でブレイクポイントの設定　-->
  
  @media (min-width: 360px) {
  
    body {
  
      font-size: 1.0em;
  
    }
  
  }
  @media (min-width: 500px) {
  
    .seven-day-fc .temp-low,
  
    .seven-day-fc .temp-high {
  
      display: inline-block;
  
      width: 45%;
  
    }
    .seven-day-fc .seven-day-temp {
  
      margin-left: 5%;
  
    }
    .seven-day-fc .icon {
  
      width: 64px;
  
      height: 64px;
  
    }
  
  }

• 違うサイズに大雑把なレイアウトの設定ができましたら、メタタグ(viewport)の設定でより効果できとなります