PCサイトでもモバイルサイトでも、スマートフォンに対応するのに時間とお金がかかると言う事で

中々進んでない印象を受ける今日この頃。

そこで、この値を指定すると綺麗に出来るぞっって言う方法を紹介。

と言っても誰向けに書いてるんだろうなぁ。
個人でサイト運営をしている人にもいいし、企業内でWEB系の職種で働いてる人にもいいかな。
テンプレとして持っているといいと思います。
では本題。

【VIEWPORT】
ヘッダー内に
<meta name="viewport" content="width=1024">
と記述する事で、スマートフォンで見たときの表示領域を指定できます。


PCサイトでは以前は横幅950ピクセル以内に収まっていたんですが、最近は横幅980ピクセル以上になって来てます。
そういうコンテンツをviewportを設定しないでスマートフォンで見ると、画面からはみ出て見えなくなったりします。

viewportには、他にもこんなプロパティがあります。
  • width 横幅 980ピクセル
  • height 縦の高さ 端末の縦幅による
  • initial-scale 初期の拡大率 1.0
  • user-scale 拡大縮小の可否 可能
  • minimum-scale 最少倍率 0.25倍
  • maximum-scale 最大倍率 1.6倍
各項目の右端はデフォルト値です。

注意点としては、widthをdevice-width以外の数値に設定すると、横向き時(landscape)にもその幅に固定されてしまいます。
そのため、スマートフォン専用のサイトでは一般的に
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
などの指定が見られます。
※リキッドレイアウト用

ちなみに、スマートフォンはiPhoneとAndroidでも挙動が違う場合があり、さらにAndroidだとバージョンや端末によっても多少変わってくるので、実機で試す以外に無いのですが。。。
これがなんとかならないかな。

PC画面上で見れるモデレーターとかコンバーターとかあればいいですね。
普通のモバイルサイト用ならたくさんあるんですけど。

FireFoxとかChromeならアドオンで出そうだけど。。。

サファリを使うとこんな使い方が出来るようです。

iPhone向けはこちらが便利そうです。

また何かあればご紹介します。

それでは、また。