ディスプレイの状態チェックに使う真っ白な画面のサイト

真っ白な画面を表示すると液晶ディスプレイの欠けや色合いがおかしい状態を簡単にチェックできる。

機能

ブラウザを最大化（F11）するとウインドウ枠も消え真っ白な画面になる
クリック（タッチ）すると順に　赤(#FF0000) ⇒ 緑(#00FF00) ⇒ 青(#0000FF) ⇒ 白(#FFFFFF) と連続して背景色が変化する

それだけ

このプログラム

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>white</title>

	<style>
		*{
			margin: 0;
			padding: 0;
			line-height: 0;
		}
	</style>

	<script src="main.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

main.js

/*
 * ディスプレイのチェック用
 *
 *	真っ白な画面を表示する（タッチで赤->緑->青->白...と繰り返す）
 *
 *	2024-12-21
 *
*/

let body = null;												// bodyタグ
const colors = ["#ffffff", "#ff0000", "#00ff00", "#0000ff"];	// 白、赤、緑、青
let index = null;												// colorsのindex

/*
 * 背景色変更
 */
const changeBackgroundColor = (e) => {
	// インデックスのローテーション
	if(index >= colors.length) index = 0;

	// 背景色変更
	body.style.backgroundColor = colors[index++];
};

/*
 * タッチした時の処理（モバイル端末向け）
 */
const touchStartListener = (e) => {
	// 端末のデフォルト動作をキャンセル
	e.preventDefault();

	// 背景色変更
	changeBackgroundColor();
};

/*
 * マウスを押した時の処理
 */
const mouseDownListener = (e) => {
	// 背景色変更
	changeBackgroundColor();
};

/*
 * スマホ・タブレット⇔PCのチェック
 */
const isMobile = () =>{
	// スマホかPCかのチェック（iPhoneまたはAndroidとMobileを含む文字列か？で判断）
	if(navigator.userAgent.match(/iPhone|Android.+Mobile/)){
		console.log("端末チェック: Mobile");
		return true;	// スマホ端末判定
	}
	else{
		console.log("端末チェック: PC");
		return false;	// PC判定
	}
}

/*
 * 起動時の処理
 */
window.addEventListener("load", async ()=>{
	// bodyタグ取得
	body = document.querySelector("body");

	// 最初の背景色は白
	index = 0;
	body.style.backgroundColor = colors[index++];

	// 入力イベント設定（スマホとPCで振り分ける）
	if(isMobile()){		// スマホならタッチイベントで設定
		window.addEventListener("touchstart", touchStartListener, {passive: false});
	}
	else{				// PCならマウスイベントで設定
		window.addEventListener("mousedown", mouseDownListener, false);
	}

});