найти размеры экрана в дюймах а не в пикселях с помощью JavaScript

Я читал много вопросов о so относительно лучших способов определения размера экрана в пикселях, который в конечном счете зависит от разрешения, чтобы найти фактический размер экрана.

Я знаю, что некоторые мобильные устройства имеют маленький экран (скажем 4 дюйма), но разрешение высокое. Хотя некоторые устройства r имеют большой экран (скажем, вкладку 7inch), но разрешение низкое.

поэтому, когда вы хотите отобразить свою страницу пользователю, вам действительно нужен размер экрана в дюймах или сантиметрах, чтобы дать лучший вид, успокаивающий глаза.

поэтому я спрашиваю: Есть ли возможность узнать размер экрана устройства в дюймах, а не в пикселях ? Я знаю, что это возможно, при условии, что мы знаем резолюцию! !Bec мы можем рассчитать размер от ширины экрана и высоты

ценю любую идею!

6
javascript jquery screen

3 ответов

после того, как вы получили разрешение экрана в пикселях, вы можете разработать dpi со скрытым div:

<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;

пример

14

теперь, насколько я могу судить, нет надежного способа точно получить ширину экрана устройства. Все (включая дюймы, 1in = = 96px) так или иначе основано на разрешении экрана.

теперь я знаю, что это может быть не исправление-все для всех, но, надеюсь, это поможет нескольким людям. Это помогло мне, так как я хотел, чтобы моя страница вела себя по-другому для мобильных пользователей, и мой первоначальный план атаки был основан на размере экрана.

Что Я в конечном итоге это была замена строки 

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://stackoverflow.com/a/26577897/8082614

1

просто попробовал решение" width: 1in". Я отобразил полученный div. Я измерил его настоящей линейкой. Это был не 1 дюйм на моем рабочем столе (Windows 7) или на моем телефоне (LG G4). На моем рабочем столе и телефоне версии: Chrome 64.0.3282.140 и FireFox 58.0.1.

на моем телефоне div имеет ширину 11/16 дюйма в обоих браузерах. На моем рабочем столе div немного меньше 17/16 дюйма в обоих браузерах.

может быть, лучше, чем догадки, но не сильно.

в тестовый файл:

<!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>
0