サイト移転しました → GLOSSY

     
  1. >
  2. >
  3. スマートフォンサイ…
  • 最終更新日:
  • 投稿者: @signpostme

スマートフォンサイトを作る時の「Viewport」設定を考えてみる

ここ連日はスマートフォン用のサイト構築を行っておりました。その際に出てきた問題が「viewport」の設定。この値をどう指定するかによって端末ごとに表示される結果が変わってしまうのがスマホサイト制作の難しいところです。

viewport とは

iPhoneやandroidといったスマートフォンでウェブページを表示させる場合、端末側が勝手にウェブページの表示サイズを決めちゃうわけです。

そのため、サイトが適切な大きさで表示されなくなり、文字が小さすぎたり画像がはみ出たりといろいろ大変なことになります。

 

そこで登場するのが「viewport」。

これは、METAタグとして埋め込みこれを埋め込むだけでウェブページを適切なサイズで表示してくれるようになります。

 

 

 viewport に設定できる基本的な値の種類

width
… 表示させる横幅を設定。device-widthなどの特別なプロパティも存在している。
 
height
… 表示させる縦幅を設定。device-heightなどの特別なプロパティが存在している。
 
minimum-scale
… 縮小倍率の最低値の設定。デフォルトは0.25。
 
maximum-scale
… 拡大倍率の最大値。デフォルトは1.6。
 
user-scalable
… ズームイン・アウトを許可するかどうか。デフォルトはyes。

 

 

個人的におすすめなviewportの書き方

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

 

コードの解説をすると、「width」は「device-width(デバイスの解像度に合わせる)」にして適切なサイズでページを表示させます。

次の「initial-scale=1.0」は、アプリ表示モードにしたウェブサイトをiPhone5で閲覧するときの互換性を解除するために記述しています。

最後の「user-scalable=no」は、ユーザーによる表示の拡大・縮小を禁止する記述です。

これは単にあるとうっとおしいと感じたのでnoにしました。

 

ウェブサイトの環境によっていろいろと値を変えてみたほうがい良いと思います。

 

新着記事を見る

TOP