【viewport】スマホ専用サイトの場合は固定幅かデバイス幅どちらがいいのか。

スマホ専用サイトのときのviewportの指定で悩んだのでまとめます。

固定幅のメリット・デメリット

<meta name="viewport" content="width=640">

メリット

どのデバイスでも同じ見え方になる。

全体を縮小して表示するので、1行あたりの文字数が変わることはない。(端末のフォントサイズが同じ場合)
全てのデバイスで文字行数等もデザイン通りにしたい場合は、固定幅がいい。

デメリット

viewport640px、コンテンツ幅600px、左右margin20pxで作成した場合。
デバイス幅が320pxの端末では縮小され、左右margin10pxで表示される。(20*(320/640)=10)
デバイス幅が414pxの端末では縮小され、左右margin13pxで表示される。 (20*(414/640)=12.9375)
つまり3pxの余白を損してしまう。

再現したことはないが、 古いAndroid、Galaxy等で固定幅が正しく認識されないとの情報。

画像とテキストの比率がきれいに保たれるがデバイスが大きくなるにつれスペースの有効活用ができない。

デバイス幅のメリット・デメリット

リキッドデザイン。

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

メリット

余白が有効に使える。(デバイス幅が大きくなるにつれ顕著)

デメリット

画面幅によって行数等のレイアウトが変わる。

・スマホ専用のリキッドで組まれたサイト

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

https://pass-me.jp/

まとめ


現状のスマホ専用サイトであれば固定幅でも問題ない。
デザインデータ通りに作成でき、リキッドに組まなくていいのでコーディングも早く終わる。

ブログのように1画面に多くの情報(テキスト)を配置したい場合はスペースを有効に使えるdevice-widthを指定したほうがよさそうだ。

よって
・デザインを魅せる感じのページは固定幅。
・メディアサイトのような多くの情報を見せたいならdevice-width。

まあ魅せるページといってもテキスト行数が変わるくらいなので、少し労力はかかるが、レスポンシブにも対応できるdevice-widthで。

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD