https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/divide-image-size-for-retina-display-with-javascript/
https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/divide-image-size-for-retina-display-with-javascript/

JavaScriptでRetinaディスプレイ向けに画像サイズを分けるのに便利なdevicePixelRatio()プロパティの使い方

devicePixelRatioプロパティの使い方

MacのRetinaディスプレイの様な高解像度ディスプレイは通常のディスプレイよりピクセル密度(ppi)が高いです。ピクセル密度は平たく言えば、1pxに対して使われるデータ量のことです。

もし、APPの方がこの様な高解像度ディスプレイ向けの対応をしていない場合、画面上で画像がぼやける可能性があります。

そのため、ディスプレイの1pxに対して使われているデータ量の比率を調べるためにdevicePixelRatioプロパティが使われます。

メソッド

メソッド意味返り値
window.devicePixelRatioデバイスピクセルに対する物理ピクセルの使用比率数値(現在は最大で3くらい)
devicePixelRatio()

サンプルコード

サンプルコードとして、ボタンを押すと、縦幅と横幅を出力するスクリプトを紹介します。

Output
Pug
div#targetText
SCSS
#button {
	--background-color: #fff;
  --color: #576574;
	--transition: all .3s;
	margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
	border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
	transition:  var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
const targetText = document.getElementById('targetText');
targetText.textContent = `このデバイスピクセル比率は${window.devicePixelRatio}です。`;

画面に表示しようとしている画像のサイズが「100 × 100」で、デバイスピクセル比率が「2」であれば、実際に使用する画像は「200 × 200」にする必要があり、「3」であれば、「300 × 300」にする必要があります。

サンプルコードでは実装していませんが、出力する画像自体はデバイスピクセルの比率の値に応じて切り替えます。

インストラクター
コメント

コメントを残す