スマホ・タブレットのviewport設定メモ

2018/03/23更新 カテゴリー:開発奮闘記 タグ: ,
  • このエントリーをはてなブックマークに追加

viewportは奥深い。というか、スマホもタブレットもOSと機種、画面サイズがそれぞれ違うため、全てを調整しながら作っていくのは難しい。最初の設計段階でよくよく考えておかないと。viewportでいろいろと試行錯誤したのでメモ。

SPONSOR

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">

の設定を使うことが多い。デバイスいっぱいに表示させ、拡大縮小をさせない。

SPONSOR

横向きへの対応

しかし、このままだとスマホを横向きにすると文字が余計に拡大されてみづらい。

そこで、以下のCSSをbodyに設定。

-webkit-text-size-adjust: 100%;

これがデフォルトではautoになっているため、文字が大きくなるのだが、ここを100%にすると自動調整を解除できる。

SPONSOR

横向きへの対応

さらに、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" />

で解除することが出来る。

フリーランスエンジニアの稼ぎ方

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

PROFILE

プロフィール

入江 慎吾
自分が作ったサービスで生きていく。同じゴールを目指すサービス開発集団「入江開発室」を運営(現在約280名) / 個人間スキルシェアサービス「MENTA」は1ヶ月と10日で売上100万円を達成。1日で100社が利用した「JobTag」など多数開発
(詳しいプロフィール)

PRODUCT

イリテクで開発したプロダクト

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす