Question

我正在阅读很多关于检测屏幕尺寸的最佳方法的问题，这些问题最终取决于找到实际屏幕尺寸的分辨率。

我知道有些移动设备屏幕较小（比如4英寸）但分辨率很高。虽然有些设备有大屏幕（比如7英寸标签），但分辨率很低。

因此，当您想要向用户显示您的页面时，您确实需要以英寸或厘米为单位的屏幕尺寸，以提供最舒适的视野。

所以我问：有没有找到设备的屏幕尺寸，以英寸而不是像素？我知道它可以，只要我们知道决议！！我们可以根据屏幕宽度和高度来计算尺寸

欣赏任何想法！

Answer 1

一旦你获得了以像素为单位的屏幕分辨率，就可以使用隐藏的div来计算dpi：

<div id="dpi" style="height: 1in; width: 1in; left: 100%; position: fixed; top: 100%;"></div>

JS

var dpi_x = document.getElementById('dpi').offsetWidth;
var dpi_y = document.getElementById('dpi').offsetHeight;

然后用英寸计算分辨率：

var width = screen.width / dpi_x;
var height = screen.height / dpi_y;

Example

Answer 2

刚试过＆＃34;宽度：1英寸＆＃34;解。我显示了结果div。我用一个真正的统治者来测量它。它在我的桌面（Windows 7）和手机（LG G4）上都不是1英寸。在我的桌面和手机上，版本为：Chrome 64.0.3282.140和FireFox 58.0.1。

在我的手机上，两个浏览器的div大约是11/16英寸宽。在我的桌面上，两个浏览器中的div都小于17/16英寸。

也许比疯狂的猜测更好，但并不多。

测试文件是：

＆＃13;

<!doctype html>

<html>
<style>
-ms-@viewport {
    width: device-width;
    initial-scale: 1;
    zoom: 1;
}
@viewport {
    width: device-width;
    initial-scale: 1;
    zoom: 1;
}
</style>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test DPI</title>
</head>
<body style="margin: .5cm">
<h1 class=title>Test DPI 2</h1>

<div style="width: 1in; height: 1cm;background-color:black"></div>


</body>
</html>

＆＃13;

Answer 3

现在，据我所知，没有确定的方法来准确获取设备的屏幕宽度。所有内容（包括英寸，1英寸== 96像素）都以某种方式基于屏幕分辨率。

现在，我知道这对所有人来说可能都不是解决方法，但希望它可以帮助一些人。它帮助了我，因为我希望我的页面对移动用户的行为有所不同，而我最初的攻击计划将基于屏幕大小。

我最终做的是更换线

if (screen.height <= 768)

带

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent))

作为免责声明，我还应该提到这是来自几年前的答案，因此有些设备可能不会被覆盖。

来源：https://ctan.org/pkg/alltt

使用javascript查找以英寸为单位的屏幕尺寸而非像素

3 个答案: