/*---------------------------------------- * os-and-browser.js * Copyright (C) 2020-2022 StraightApps.com, All Rights Reserved * December 19, 2022 初期版 * December 20, 2022 更新版 *-----------------------------------------*/ // 「ユーザーエージェント」を取得して、小文字に変換しておきます。 var ua = window.navigator.userAgent.toLowerCase(); document.getElementById('user-agent').innerHTML = ua; // OS を判断します。 var strOS = "不明"; if (ua.indexOf("windows nt") !== -1) { strOS = "Windows"; } else if (ua.indexOf("android") !== -1) { strOS = "Android"; } else if (ua.indexOf("iphone") !== -1) { strOS = "iOS(iPhone)"; } else if (ua.indexOf("ipad") !== -1) { strOS = "iOS(iPad)"; } else if (ua.indexOf("mac os x") !== -1) { strOS = "macOS"; } document.getElementById('os').innerHTML = "OS は " + strOS + " です。"; // ブラウザを判断します。 var strBrowser = "不明"; if (ua.indexOf("edg") !== -1 || ua.indexOf("edge") !== -1 || ua.indexOf("edga") !== -1 || ua.indexOf("edgios") !== -1) { strBrowser = "Microsoft Edge"; } else if (ua.indexOf("opera") !== -1 || ua.indexOf("opr") !== -1) { strBrowser = "Opera"; } else if (ua.indexOf("samsungbrowser") !== -1) { strBrowser = "Samsung Internet Browser"; } else if (ua.indexOf("ucbrowser") !== -1) { strBrowser = "UC Browser"; } else if (ua.indexOf("chrome") !== -1 || ua.indexOf("crios") !== -1) { strBrowser = "Google Chrome"; } else if (ua.indexOf("firefox") !== -1 || ua.indexOf("fxios") !== -1) { strBrowser = "Mozilla Firefox"; } else if (ua.indexOf("safari") !== -1) { strBrowser = "Safari"; } else if (ua.indexOf("msie") !== -1 || ua.indexOf("trident") !== -1) { strBrowser = "Internet Explorer"; } document.getElementById('browser').innerHTML = "ブラウザは " + strBrowser + " です"; // デバイスの横幅を判断します。 document.getElementById('screen-width').innerHTML = "デバイスの横幅は " + GetDeviceWidth() + " ピクセルです。"; // 画面の表示領域の横幅を判断します。 document.getElementById('client-width').innerHTML = "画面の表示領域の横幅は " + GetClientWidth() + " ピクセルです。"; //---------------------------------------- // 「更新」ボタンにより画面の表示領域の横幅を再判断します。 function updateClientWidth() { document.getElementById('client-width').innerHTML = "画面の表示領域の横幅は " + GetClientWidth() + " ピクセルです。"; } //---------------------------------------- // デバイスの横幅を取得します。 // マルチモニタでもメインモニタのサイズのみが返されているようです。 function GetDeviceWidth() { var w = 100; var str; // まずはざっくり 100 ピクセル単位で探ります。 while (w > 0){ str = "(max-device-width: " + w + "px)"; if (window.matchMedia(str).matches) { break; } w += 100; // 安全対策 if (w > 10000){ document.getElementById('browser').innerHTML = w + " より大きい?"; return w; } } // 10 ピクセル単位で探ります。 var nMax = w; w -= 100; while (w < nMax){ str = "(max-device-width: " + w + "px)"; if (window.matchMedia(str).matches) { break; } w += 10; } // 最後は 1 ピクセル単位で探ります。 nMax = w; w -= 10; while (w < nMax){ str = "(max-device-width: " + w + "px)"; if (window.matchMedia(str).matches) { break; } w ++; } return w; } //---------------------------------------- // 画面の表示領域の横幅を取得します。 // マルチモニタでメインモニタのサイズを超えても正しい値が返されているようです。 function GetClientWidth() { var w = 100; var str; // まずはざっくり 100 ピクセル単位で探ります。 while (w > 0){ str = "(max-width: " + w + "px)"; if (window.matchMedia(str).matches) { break; } w += 100; // 安全対策 if (w > 10000){ document.getElementById('browser').innerHTML = w + " より大きい?"; return w; } } // 10 ピクセル単位で探ります。 var nMax = w; w -= 100; while (w < nMax){ str = "(max-width: " + w + "px)"; if (window.matchMedia(str).matches) { break; } w += 10; } // 最後は 1 ピクセル単位で探ります。 nMax = w; w -= 10; while (w < nMax){ str = "(max-width: " + w + "px)"; if (window.matchMedia(str).matches) { break; } w ++; } return w; }