Ответ 1

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

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

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

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

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

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

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

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

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

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

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

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

Ресурсы

• https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport
• https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport
• http://viewportsizes.com/
• http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
• http://en.wikipedia.org/wiki/Device_independent_pixel
• http://www.w3.org/TR/css3-values/#absolute-lengths
• https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Ответ 2

На основании ответа Мэт я сделал тест:

// on Macbook Pro Retina (2880x1800, 15.4"), is the calculated diagonal size
// approximately 15.4? Let 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?

Неа.

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

Ответ 3

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

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

Ответ 4

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

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

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

resolution_(width|height)

physical_display_(width|height)

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

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

Строка User Agent

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

WURFL

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

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

Загрузить WURFL

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

Ответ 5

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

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

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

Ответ 6

В качестве дополнения к ответу "нет хорошего решения этой проблемы", просто отметьте единицы, которые вы можете использовать в CSS https://www.w3schools.com/cssref/css_units.asp

Unit    Description
cm      centimeters
mm      millimeters
in      inches (1in = 96px = 2.54cm)
px *    pixels (1px = 1/96th of 1in)
pt      points (1pt = 1/72 of 1in)
pc      picas (1pc = 12 pt)

* Pixels (px) are relative to the viewing device.
For low-dpi devices, 1px is one device pixel (dot) of the display.
For printers and high resolution screens 1px implies multiple device pixels.

С этим описанием кажется, что есть решение. cm, mm, и in будет использоваться, чтобы сделать что - то с тем же размером, независимо от размера экрана и разрешения. Имея это в виду, вы можете ожидать, что по крайней мере один из px, pt или pc может использоваться для рисования на уровне пикселей, с той точностью, которую вы хотели бы использовать (иначе, какой смысл иметь миллионы пикселей, верно?). Ну нет. Все единицы являются долями метрической единицы, что делает все эти единицы просто разными масштабами. И худшим в этой истории является тот факт, что ни один из них не является точным. Просто поиграйте с примером w3schools (нарисуйте линию длиной 20 см и измерьте ее линейкой).

Итак, в конце: - нет способа точно нарисовать что-то с физическими размерами (что должно быть в случае с cm, mm, pt и, in конечном итоге, pt и pc). - нет способа нарисовать что-то с одинаковым размером независимо от размера экрана и разрешения (что должно быть в случае как минимум с px).

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

Ответ 7

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

var ppi = getPPI();
var x   = ppi * devicePixelRatio * screen.pixelDepth / 24;
$('#Cubo').width (x);
$('#Cubo').height(x);

<div id="Cubo" style="background-color:red;"></div>

Ответ 8

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

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

Ответ 9

CSS-пиксели - это не наш "независимый от устройства пиксель". Веб-платформа состоит из множества типов устройств. В то время как пиксель CSS выглядит довольно согласованным на карманных компьютерах, он будет на 50% больше на обычном настольном мониторе с разрешением 96 точек на дюйм. См. Мой question. В некоторых случаях это не так уж плохо. шрифты должны быть больше на большом экране, так как расстояние до глаза больше. Но размеры элементов 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*/
    }

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

Ответ 10

Я заметил в ваших комментариях, что вы на самом деле были обеспокоены размером, который кнопки и т.д. Показывают зрителю.

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

<meta name="viewport" content="width=device-width, initial-scale=1">

Ответ 11

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

Ответ 12

Хе-хе, я бы мог ответить на этот вопрос, но API-интерфейсы для создания гиков не обеспечивают базовых потребностей и абстрактных вещей иногда слишком много.

Кстати, у меня 40-летний опыт проектирования пользовательского интерфейса и разработки программного обеспечения, и я стремлюсь иметь именно это, как кажется, навсегда, еще до появления водителей VESA :).

Для сенсорного экрана у меня была вещь, которую я назвал "fingerSize()", это число пикселей, равное 1 см (очень близко к диаметру средней сенсорной области пальца), но корневая точка привязки - "dpcm".

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

    (Not code but I wanted fixed width font)

    Hand held - Phone/Tablet         25cm 
    Touch screen / Desktop Monitor   40cm         ( seated or standing at a counter
                                                    with partially extended arm )
    "Personal" Touch kiosk        50cm -> 80cm ( a bit further away standing 
                                                 extended arms and standing back 
                                                 to view )
    Presentation Screen.          any distance ( angle of view derived from pixel
                                                 width of device. An ideal conventional cinema 
                                                 seat (as opposed to imax or immersive) 
                                                 you want about 50 degrees
                                                 between edges of the screen. from viewer POV )

    So what you want universally available is:

    device usage type.
    finger size in pixels (dots per CM)
    pixel dimensions of display.

    Then internally, when laying out and drawing you want the size/shape of a pixel 
    for the current transform. 

Это то, что мы пытаемся предоставить в наших API, но, увы, во многих случаях это сложно получить.

Ответ 13

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

Я собрал пример, который я тестировал на нескольких устройствах, чтобы узнать, какие результаты были. Мой 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);