首先，获取设备的DPI并将其与CSS像素比较。然后，创建一个元素并将其大小设置为一英寸，然后使用JavaScript测量元素的大小并将其与DPI和CSS像素比较以获取实际屏幕大小。以下是一个示例函数：

//获取DPI function getDpi() { var dpi = 96; if (window.devicePixelRatio !== undefined) { dpi = window.devicePixelRatio * 96; } else if (window.matchMedia !== undefined) { var m = window.matchMedia( "(-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-resolution: 1.5dppx)" ); if (m !== undefined && m.matches) { dpi = 144; } } return dpi; }

//获取实际尺寸 function getActualScreenSize() { var dpi = getDpi(); var element = document.createElement("div"); element.style.width = "1in"; element.style.height = "1in"; document.body.appendChild(element); var width = element.offsetWidth; var height = element.offsetHeight; document.body.removeChild(element);

var actualWidth = width * dpi / 96; var actualHeight = height * dpi / 96;

return { width: actualWidth, height: actualHeight }; }

然后，您可以使用上述函数来计算屏幕的实际大小并使用它来设置元素的大小或进行其他屏幕相关操作。例如：

var screenSize = getActualScreenSize(); console.log(screenSize.width + "in x " + screenSize.height + "in");

注意：由于Apple设备上的Retina显示屏幕具有更高的DPI，因此它们将与普通显示器上的相同大小的元素显示更小。在进行屏幕相关的操作时，请务必考虑到这一点。