Получение размера физического экрана / dpi / плотности пикселей в Chrome на Android

Вопрос

Есть ли безопасный способ получить фактические правильные физические размеры экрана в Chrome на Android? При необходимости старые версии Chrome и Android могут быть исключены из области действия.

Предыдущие исследования

Существует множество тупиковых вопросов о stackoverflow о получении фактических физических размеров экрана устройства из javascript (или css). Кажется, нет никакой конвергенции между стандартизацией html api и фактическими реализациями браузера в том, что, не говоря уже о том, что реализация браузера зависит от ОС api, которая, в свою очередь, полагается на оборудование, предоставляющее правильную информацию.

Некоторые предварительные ответы, кстати, являются тайными (год 2011 и т. П.), Предполагая определенную плотность пикселей, которая преобладала в то время, и поэтому бесполезна. Другие относятся к webkit, но Chrome blink заменяет webkit в chrome (?).

Я хотел бы изучить существование простого решения, ограничивая вещи только Chrome на Android.

Заметка

Все это касается решения javascript (или css) внутри браузера, а не решения для родного приложения.

Solutions Collecting From Web of "Получение размера физического экрана / dpi / плотности пикселей в Chrome на Android"

Вы не можете реально получить реальные физические размеры или фактический ДОИ, и даже если бы могли, вы не можете ничего с ними делать.

Это довольно длинная и сложная история, так что простите меня.

Веб и все браузеры определяют 1px как единицу, называемую пикселем CSS. Пиксель CSS не является реальным пикселем, а единицей, которая считается 1/96-й дюйма на основе угла обзора устройства. Это указано как опорный пиксель .

Опорный пиксель представляет собой угол зрения одного пикселя на устройстве с плотностью пикселей 96dpi и расстоянием от считывателя длины руки. Таким образом, при номинальной длине руки 28 дюймов угол зрения составляет около 0,0213 градусов. Для чтения на расстоянии вытянутой руки 1px соответствует примерно 0,26 мм (1/96 дюйма).

В 0.26 мм пространства у нас может быть очень много реальных пикселей устройства.

Браузер делает это в основном по устаревшим причинам: большинство мониторов были 96 точек на дюйм при рождении сети, но также и для согласованности, в «старые дни» кнопка 22px на 15-дюймовом экране с разрешением 800×600 будет в два раза больше 22px-кнопки на 15-дюймовый монитор с разрешением 1600×1200. В этом случае DPI экрана на самом деле 2x (вдвое больше разрешения по горизонтали, но в том же физическом пространстве). Это плохая ситуация для Интернета и приложений, поэтому большинство операционных систем разработали множество способов абстрагирования значений пикселей в независимых от устройства устройствах (DIPS на Android, PT на iOS и CSS Pixel в Интернете ).

Браузер iPhone Safari был первым (насколько мне известно), чтобы представить концепцию видового экрана. Это было создано, чтобы приложения на рабочем столе полностью отображались на маленьком экране. Видовой экран был определен как ширина 960 пикселей. Это существенно увеличило размер страницы 3x (первоначально был iphone 320px), поэтому 1 пиксель CSS составляет 1/3 физического пикселя. Когда вы определили область просмотра, хотя вы можете заставить это устройство соответствовать 1 пикселю пикселя 1 пиксель = 1 реальный пиксель при 163dpi.

Используя окно просмотра, где ширина «ширина устройства» освобождает вас от необходимости устанавливать ширину окна просмотра на основе каждого устройства на оптимальный размер пикселя CSS, браузер просто делает это за вас.

С внедрением двойных устройств DPI производители мобильных телефонов не хотели, чтобы мобильные страницы отображались на 50% меньше, поэтому они представили концепцию DevicePixelRatio (сначала на мобильном веб-кадре, я полагаю), это позволяет им сохранять 1 пиксель CSS примерно 1 / 96-й дюйм, но позвольте вам понять, что ваши активы, такие как изображения, возможно, должны быть в два раза больше. Если вы посмотрите на iPhone серии, все их устройства говорят, что ширина экрана в пикселях CSS составляет 320 пикселей, хотя мы знаем, что это неверно.

Поэтому, если вы сделали кнопку 22px в пространстве CSS, представление на физическом экране составляет 22 * ​​пиксель устройства. На самом деле я говорю об этом, это не совсем так, потому что соотношение пикселей устройства никогда не бывает точным, производители телефонов устанавливают его на хорошее число, например 2.0, 3.0, а не 2.1329857289918 ….

Таким образом, пиксели CSS не зависят от устройства и позволяют нам не беспокоиться о физических размерах экранов и плотностях дисплея и т. Д.

Мораль этой истории: не беспокойтесь о понимании размера физического пикселя экрана. Вам это не нужно. 50px должно выглядеть примерно одинаково для всех мобильных устройств, это может немного измениться, но CSS Pixel – это наш независимый от устройства способ создания согласованных документов и пользовательского интерфейса.

Ресурсы:

Основываясь на ответе Мэтта, я сделал тест:

 // on Macbook Pro Retina (2880x1800, 15.4"), is the calculated diagonal size // approximately 15.4? Let's see... var svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg"); var screenWidthMillimeters = svgEl.screenPixelToMillimeterX * 2880; var screenHeightMillimeters = svgEl.screenPixelToMillimeterY * 1800; var screenDiagonalMillimeters = Math.sqrt(Math.pow(screenWidthMillimeters, 2) + Math.pow(screenHeightMillimeters, 2)); // pythagorean theorem var screenDiagonalInches = (screenDiagonalMillimeters / 10 / 2.54); // (mm / 10mm/cm) / 2.54cm/in = in console.log("The calculated diagonal of the screen is "+screenDiagonalInches+" inches. \nIs that close to the actual 15.4\"?"); 

Это результат:

 The calculated diagonal of the screen is 35.37742738560738 inches. Is that close to the actual value of 15.4? 

Неа.

Таким образом, похоже, нет никакого способа получить реальные физические значения в веб-браузере.

Вы можете получить эту информацию с WURFL:

Свойства экрана устройства

Атрибуты называются:

 resolution_(width|height) physical_display_(width|height) 

Длинная версия:

Лучшей и надежной стратегией для этого является отправка user agent string из браузера в WURFL данных, например, WURFL (или другую), которая может предоставить необходимую информацию.

Строка User Agent

Это часть информации, которую могут предоставить все современные браузеры; Он предоставляет информацию об устройстве и его ОС. Это просто не имеет смысла для вашего приложения без помощи такого словаря, как WURFL .

WURFL

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

Благодаря этому вы сможете точно поддерживать большинство популярных на рынке устройств. Я бы опубликовал демо-версию кода, но один из них можно загрузить с сайта WURFL . Вы можете найти такую ​​демонстрацию в папке примеров / демо, загружаемой в библиотеку.

Загрузить WURFL

Ниже приведена дополнительная информация и пояснения относительно проверки физического размера и разрешения: http://www.scientiamobile.com/forum/viewtopic.php?f=16&t=286

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

 <div id="meter" style="width:10cm"></div> 

А затем получите ширину в пикселях. Например, html-код ниже (я использовал JQuery) показывает ширину экрана устройства в сантиметрах

 <script> var pixPer10CM = $('#meter').width(); var CMPerPix = 10 / pixPer10CM; var widthCM = screen.width * CMPerPix; alert(widthCM); </script> 

Я решил эту проблему с одним из моих веб-проектов http://www.vinodiscover.com . Ответ заключается в том, что вы не можете точно знать, что такое физический размер, но вы можете приблизиться. Используя JS и / или CSS, вы можете найти ширину и высоту экрана / экрана и плотность пикселей, используя медиа-запросы. Например: iPhone 5 (326 ppi) = 320 пикселей на 568 пикселей и плотность 2,0 пикселя, а Samsung Galaxy S4 (441 пикселей) = 360 пикселей x 640 пикселей и плотность 3,0 пикселя. Эффективно плотность 1,0 пикселей составляет около 150 ppi.

Учитывая это, я установил, чтобы мой CSS показывал 1 столбец, когда ширина меньше 284 пикселей, независимо от плотности пикселей; Затем два столбца между 284px и 568px; Затем 3 столбца выше 852px. Это намного проще, чем кажется, поскольку браузеры теперь автоматически вычисляют плотность пикселей.

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Использование функции getPPI () ( мобильная сеть: как получить размер физического пикселя? ), Чтобы получить один дюйм id, используйте эту формулу:

 var ppi = getPPI(); var x = ppi * devicePixelRatio * screen.pixelDepth / 24; $('#Cubo').width (x); $('#Cubo').height(x); <div id="Cubo" style="background-color:red;"></div> 

В ответ на ответ zehelvion об использовании WURFL, чтобы найти разрешение, стоит также упомянуть, что WURFL также доступен как фрагмент кода JavaScript .

В бесплатной версии, предлагаемой в wurfl.io , вы не будете получать информацию о экране и разрешении, хотя (только имя устройства, форм-фактор и мобильный / не мобильный), но есть также коммерческая версия с более широкими возможностями, доступными здесь .

CSS-пиксели не являются нашим «независимым от устройства пикселем». Веб-платформа состоит из множества типов устройств. Несмотря на то, что пиксель CSS выглядит довольно согласованным на карманных компьютерах, он будет на 50% больше на обычном настольном мониторе с разрешением 96 точек на дюйм. См. Мой вопрос . В некоторых случаях это действительно не так, например, шрифты должны быть больше на большом экране, так как расстояние до глаза больше. Но размеры элементов ui должны быть довольно последовательными. Скажем, у вашего приложения есть верхний бар, вы бы хотели, чтобы он был такой же толщины на рабочем столе и мобильных телефонах, по умолчанию он будет на 50% меньше, что плохо, потому что сенсорные элементы должны быть больше. Единственным обходным решением, которое я нашел, является применение разных стилей на основе DPI устройства.

Вы можете получить экран DPI в JavaScript с помощью window.devicePixelRatio. Или запрос CSS:

 @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) { /* specific styles for handhelds/ high dpi monitors*/ } 

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

Ширина элемента JqueryMobile

 $(window).width(); // returns width of browser viewport $(document).width(); // returns width of HTML document 

JqueryMobile Высота элемента

 $(window).height(); // returns height of browser viewport $(document).height(); // returns height of HTML document 

Удачи Danny117

Вы можете получить приблизительную оценку размера, но это не точно.

Я собрал пример, который я тестировал на нескольких устройствах, чтобы узнать, какие результаты были. Мой iPhone 6 возвращает значения примерно на 33% больше. Мой 27-дюймовый настольный монитор на моем Mac сообщил о 30-дюймовом мониторе.

 var $el = document.createElement('div'); $el.style.width = '1cm'; $el.style.height = '1cm'; $el.style.backgroundColor = '#ff0000'; $el.style.position = 'fixed'; $el.style.bottom = 0; document.body.appendChild($el); var screenDiagonal = Math.sqrt(Math.pow((window.screen.width / $el.offsetWidth), 2) + Math.pow((window.screen.height / $el.offsetHeight), 2)); var screenDiagonalInches = (screenDiagonal / 2.54); var str = [ '1cm (W): ' + $el.offsetWidth + 'px', '1cm (H): ' + $el.offsetHeight + 'px', 'Screen width: ' + window.screen.width + 'px', 'Screen height: ' + window.screen.height + 'px', 'Browser width: ' + window.innerWidth + 'px', 'Browser height: ' + window.innerHeight + 'px', 'Screen available width: ' + window.screen.availWidth + 'px', 'Screen available height: ' + window.screen.availHeight + 'px', 'Screen width: ' + (window.screen.width / $el.offsetWidth).toFixed(2) + 'cm', 'Screen height: ' + (window.screen.height / $el.offsetHeight).toFixed(2) + 'cm', 'Screen diagonal: ' + screenDiagonal.toFixed(2) + 'cm', 'Screen diagonal: ' + screenDiagonalInches.toFixed(2) + 'in', 'Device Pixel Ratio: ' + (window.devicePixelRatio || 1) ].join('\n'); var $pre = document.createElement('pre'); $pre.innerHTML = str; document.body.appendChild($pre);