読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

JavaScriptとjQueryで様々な画面サイズを取得する

Webアプリでレイアウトを制御しようとすると様々な画面サイズを把握する必要があります。

iPhoneのシミュレーター上のSafariでの動作結果をまとめました。

取得方法

Webブラウザーのクライアント領域の論理ピクセル数

Webブラウザーが1画面で表示できる範囲です。
縦画面、横画面の状態に対応しています。

// 幅
window.innerWidth
// or
document.documentElement.clientWidth

// 高さ
window.innerHeight
// or
document.documentElement.clientHeight

Webページ全体の論理ピクセル数

Webブラウザーに表示しているページ全体の論理ピクセル数です。クライアントサイズより大きい場合は1画面に収まっていないのでスクロールするようになります。
縦画面、横画面の状態に対応しています。

// 幅
document.width

// 高さ
document.height

Webページのbodyの論理ピクセル数

Webページのbodyのサイズです。ほぼdocument.widthやdocument.heightと同じですが、positionスタイルがabsoluteの要素は含まれません。
縦画面、横画面の状態に対応しています。

// 幅
document.body.clientWidth
// or(jQueryの時)
$('body').width()

// 高さ
document.body.clientHeight
// or(jQueryの時)
$('body').height()

モバイル端末の画面の論理ピクセル数

Webアプリ開発では不要な情報だと思います。常に縦画面の状態での値を返します。

// 幅
screen.width
// or
window.parent.screen.width

// 高さ
screen.height
// or
window.parent.screen.height

モバイル端末の描画可能な論理ピクセル数

Webアプリ開発では不要な情報だと思います。常に縦画面の状態での値を返します。

// 幅
screen.availWidth

// 高さ
screen.availHeight

論理ピクセル数とは

スマートフォンなどのモバイル端末では、画面の解像度が短期間に激変します。例えば、最初のiPhoneでは3.5インチの画面で320x480ピクセルだったものが、iPhone6S Plusでは、5.5インチの画面で1,125x2,001ピクセルになりました(iPhone/iPad解像度(画面サイズ)早見表 - Qiita より)。画面サイズの拡大が1.6倍なのに対して、解像度は4倍近く増えています。1ピクセルの大きさが半分以下になったということです。

実際に画面を構成しているピクセル数を「物理ピクセル数」などと呼びます。物理ピクセル数で画面を設計すると、ボタンや文字などが以前の半分以下の大きさになってしまい、見づらく、操作も難しくなります。解像度の違いに合わせて個別のレイアウトを作成するのも手間がかかって仕方ありません。

そこでモバイル端末では、古い端末と同じようなピクセル数を持った仮想の画面を定義して、その上でレイアウトすることができます。仮想の画面のピクセル数を「論理ピクセル数」などと呼びます。

仮想の画面をどのようなサイズにするかはHTMLの「<meta name="viewport"・・・」で始まる行で調整します。

以下のようなHTMLにすると、解像度が違う種端末間でも同じような画面を設計することができます。shrink-to-fit=noは、iOS9.2で導入された設定です。これを指定しないと、ページの内容に応じて自動的にサイズが調整されてしまい、意図通りの制御が難しくなります。

AndroidiOSのどちらでもそのまま利用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,shrink-to-fit=no" />
    <title></title>
</head>
<body>
<p>本文</p>
</body>
</html>

[user-scalable=no]は、ユーザーのピンチ操作などで、ブラウザーの拡大率が変更できないようにする設定です。これを設定するかは、どのようなアプリケーションを作成するかによります。Web地図のようにアプリ側でピンチ操作を利用する場合は、Webページが拡大するのか、Web地図が拡大するのかが混乱するので、この設定をします。

通常のWebページでは、[user-scalable=no]と[shrink-to-fit=no]はなくても良いかもしれません。状況に合わせて調整してください。