スマホ・タブレットのviewport設定メモ
viewportは奥深い。というか、スマホもタブレットもOSと機種、画面サイズがそれぞれ違うため、全てを調整しながら作っていくのは難しい。最初の設計段階でよくよく考えておかないと。viewportでいろいろと試行錯誤したのでメモ。
目次
viewportの設定
| width | 横幅。device-widthと指定すると、見ているデバイスの横幅が自動的に入り、画面いっぱいに表示される。 |
|---|---|
| initial-scale | 最初に表示された時の拡大倍率。1.0がデフォルトの倍率。 |
| minimum-scale | 最小拡大倍率。1.0がデフォルトの倍率。 |
| maximum-scale | 最大拡大倍率。1.0がデフォルトの倍率。 |
| user-scalable | 拡大縮小の可否。noとするとユーザーは拡大縮小できない。 |
一般的なスマホサイトをつくろうとすると
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
の設定を使うことが多い。デバイスいっぱいに表示させ、拡大縮小をさせない。
横向きへの対応
しかし、このままだとスマホを横向きにすると文字が余計に拡大されてみづらい。
そこで、以下のCSSをbodyに設定。
-webkit-text-size-adjust: 100%;
これがデフォルトではautoになっているため、文字が大きくなるのだが、ここを100%にすると自動調整を解除できる。
横向きへの対応
さらに、Androidではこれだけでは足りないことがある。device-widthでデバイスの幅に合わせてコンテンツを表示する場合、画面に収まりきれず、横スクロールがでてはみでることがある。これを避けるべく、viewportにはtarget-densitydpiという解像度の設定もある。これはAndroidのみ。
| low-dpi | 低解像度。120dpiまで。 |
|---|---|
| medium-dpi | 中解像度。160dpiまで。 |
| high-dpi | 高解像度。240dpiまで。 |
| device-dpi | 対象デバイスのdpiをそのまま使用 |
デフォルトはmedium-dpiのようだ。
<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi">
のようにして設定できる。
おまけだが、918272のように数字が並ぶと自動的に電話と認識してリンクが貼られるのを防ぐには
<meta name="format-detection" content="telephone=no" />
で解除することが出来る。
[sc name=”engeneer”]
SHARE
スキルアップにMENTA
MENTAはいろんなプロに相談できるNo1メンターサービスです。
僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。
YouTubeでも発信中！
PROFILE
入江 慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表／個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました／福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 （詳しいプロフィール）
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表／個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました／福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 （詳しいプロフィール）