질문

Android의 Chrome에서 실제로 정확한 화면 물리적 크기를 얻는 안전한 방법이 있습니까? 필요한 경우 이전 버전의 Chrome 및 Android는 지원 범위에서 제외 될 수 있습니다.

사전 연구

자바 스크립트 (또는 CSS) 내에서 기기의 실제 물리적 화면 크기를 가져 오는 것에 대한 스택 오버플로에 대한 수많은 막 다른 질문이 있습니다. 브라우저 구현이 올바른 정보를 제공하는 하드웨어에 의존하는 OS API에 의존하는 것은 말할 것도없고 html API 표준화와 실제 브라우저 구현간에 수렴이없는 것 같습니다.

그런데 이전 답변 중 일부는 그 당시에 우세한 특정 픽셀 밀도를 가정하여 무의미하고 (2011 년 등) 쓸모가 없습니다. 다른 것들은 웹킷과 관련이 있지만 크롬 깜박임은 크롬 (?)의 웹킷을 대체했을 수 있습니다.

Android의 Chrome으로 만 제한하여 간단한 솔루션의 존재를 탐색하고 싶습니다.

노트

이것은 네이티브 앱을위한 솔루션이 아니라 브라우저 내부의 자바 스크립트 (또는 CSS) 솔루션에 관한 것입니다.

실제로 실제 물리적 치수 나 실제 DPI를 얻을 수 없으며 가능하더라도 아무것도 할 수 없습니다.

이건 꽤 길고 복잡한 이야기 ​​니 용서 해주세요.

웹과 모든 브라우저는 CSS 픽셀이라는 단위로 1px를 정의합니다. CSS 픽셀은 실제 픽셀이 아니라 장치의 시야각을 기준으로 1/96 인치로 간주되는 단위입니다. 이것은 참조 픽셀 로 지정됩니다 .

참조 픽셀은 픽셀 밀도가 96dpi이고 판독기에서 팔 길이의 거리를 가진 장치에서 한 픽셀의 시각 각도입니다. 따라서 공칭 팔 길이가 28 인치 인 경우 시각 각도는 약 0.0213 도입니다. 팔 길이로 읽을 때 1px는 약 0.26mm (1/96 인치)에 해당합니다.

0.26mm의 공간에는 실제 장치 픽셀이 매우 많이있을 수 있습니다.

브라우저는 주로 레거시 이유로이 작업을 수행합니다. 웹이 탄생했을 때 대부분의 모니터는 96dpi 였지만 일관성을 위해 "예전에는"800x600의 15 인치 화면에있는 22px 버튼이 22px 버튼 크기의 두 배가되었습니다. 1600x1200의 15 인치 모니터. 이 경우 화면의 DPI는 실제로 2x (가로 해상도의 두 배이지만 동일한 물리적 공간에 있음)입니다. 이것은 웹과 앱에 좋지 않은 상황이므로 대부분의 운영 체제는 픽셀 값을 기기 독립 단위 (Android의 DIPS, iOS의 PT 및 웹 의 CSS Pixel) 로 추상화하는 여러 방법을 고안했습니다 .

iPhone Safari 브라우저는 뷰포트 개념을 처음으로 도입 한 것입니다. 이것은 전체 데스크톱 스타일 응용 프로그램이 작은 화면에서 렌더링 될 수 있도록 만들어졌습니다. 뷰포트는 960px 너비로 정의되었습니다. 이것은 본질적으로 페이지를 3 배 축소 (iphone은 원래 320px)하여 1 CSS 픽셀은 실제 픽셀의 1/3입니다. 뷰포트를 정의 할 때이 장치가 163dpi에서 1 CSS 픽셀 = 1 실제 픽셀과 일치하도록 할 수 있습니다.

너비가 "device-width"인 뷰포트를 사용하면 장치별로 뷰포트의 너비를 최적의 CSS 픽셀 크기로 설정하지 않아도됩니다. 브라우저가 자동으로 수행합니다.

이중 DPI 장치의 도입으로 휴대폰 제조업체는 모바일 페이지가 50 % 더 작게 표시되는 것을 원하지 않았기 때문에 devicePixelRatio (내가 믿는 모바일 웹킷에서 처음)라는 개념을 도입했습니다. 따라서 1 CSS 픽셀을 대략 1 /로 유지할 수 있습니다. 96 분의 1 인치이지만 이미지와 같은 자산의 크기가 두 배 여야 할 수도 있음을 이해하십시오. iPhone 시리즈를 살펴보면 모든 장치에서 CSS 픽셀로 된 화면 너비 가 320px 라고 말합니다. 비록 이것이 사실이 아니라는 것을 알고 있습니다.

따라서 버튼을 CSS 공간에서 22px로 만들면 실제 화면의 표현은 22 * ​​장치 픽셀 비율입니다. 실제로 나는 이것을 말한다. 그것은 장치 픽셀 비율이 결코 정확하지 않기 때문에 정확히 이것이 아니다. 전화 제조업체는 그것을 2.1329857289918이 아닌 2.0, 3.0과 같은 좋은 숫자로 설정했다 ....

요약하면 CSS 픽셀은 장치에 독립적이며 화면의 물리적 크기와 디스플레이 밀도 등에 대해 걱정할 필요가 없습니다.

이야기의 교훈은 : 화면의 물리적 픽셀 크기를 이해하는 것에 대해 걱정하지 마십시오. 당신은 그것을 필요로하지 않습니다. 50px는 모든 모바일 장치에서 거의 동일하게 보일 것입니다. 약간 다를 수 있지만 CSS Pixel은 일관된 문서와 UI를 빌드하는 장치 독립적 인 방법입니다.

자원:

• 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

Matt의 답변에 따라 테스트를했습니다.

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

아니.

따라서 아직 웹 브라우저에서 실제 물리적 값을 얻을 수있는 방법이없는 것 같습니다.

모든 페이지 요소를 만들고 실제 물리적 단위를 사용하여 너비를 설정할 수 있습니다. 예를 들면

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

WURFL로 정보를 얻을 수 있습니다.

장치 표시 속성

속성은 다음과 같습니다.

resolution_(width|height)

physical_display_(width|height)

긴 버전 :

이를 달성하기위한 최선의 가장 신뢰할 수있는 전략 user agent string은 브라우저 WURFL에서 필요한 정보를 제공 할 수있는 최신 DB 와 같은 (또는 다른) DB 로를 보내는 것 입니다 .

사용자 에이전트 문자열

이것은 모든 최신 브라우저가 제공 할 수있는 정보입니다. 장치와 OS에 대한 정보를 노출합니다. 같은 사전의 도움 없이는 응용 프로그램에 충분히 의미가 없습니다 WURFL.

WURFL

이것은 장치 속성 을 감지하는 데 일반적으로 사용되는 데이터베이스 입니다.

이를 통해 시장에서 인기있는 대부분의 장치를 정확하게 지원할 수 있습니다. 코드 데모를 게시하지만 WURFL사이트 에서 다운로드 할 수 있습니다. 라이브러리와 함께 다운로드 된 examples / demo 폴더에서 이러한 데모를 찾을 수 있습니다.

WURFL 다운로드

다음은 물리적 크기와 해상도 확인에 대한 자세한 정보와 설명입니다. http://www.scientiamobile.com/forum/viewtopic.php?f=16&t=286

"이 문제에 대한 좋은 해결책은 없습니다"답변에 대한 보완으로 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 예제 (20cm 선을 그리고 눈금자로 측정)를 가지고 놀아보세요.

그래서 결국 : - (의 경우해야 정확하게 물리적 치수 뭔가 그릴 수있는 방법은 없습니다 cm, mm, in, 결국 pt등을 pc). -화면 크기 및 해상도와 관계없이 같은 크기로 무언가를 그릴 수있는 방법이 없습니다 (최소한 px).

이것은 구현 문제 (실제 화면 크기가 사용되지 않음)와 디자인 문제 ( px이미 너무 많은 단위가 있지만 화면 크기와 독립적 이어야하는 이유 )입니다.

나는 내 웹 프로젝트 http://www.vinodiscover.com 중 하나에서이 문제를 다루었습니다 . 대답은 물리적 크기가 무엇인지 확실히 알 수 없지만 근사값을 얻을 수 있다는 것입니다. JS 및 / 또는 CSS를 사용하여 뷰포트 / 화면의 너비와 높이, 미디어 쿼리를 사용하여 픽셀 밀도를 찾을 수 있습니다. 예 : iPhone 5 (326ppi) = 320x568 픽셀 및 2.0 픽셀 밀도, 삼성 Galaxy S4 (441ppi) = 360 픽셀 x 640 픽셀 및 3.0 픽셀 밀도. 사실상 1.0 픽셀 밀도는 약 150ppi입니다.

이것을 감안할 때, 픽셀 밀도에 관계없이 너비가 284px보다 작을 때 1 열을 표시하도록 CSS를 설정했습니다. 그런 다음 284px에서 568px 사이의 두 열; 그런 다음 852px 이상의 3 열. 브라우저가 이제 픽셀 밀도 계산을 자동으로 수행하기 때문에보기보다 훨씬 간단합니다.

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

WURFL을 사용하여 해상도를 찾는 것에 대한 zehelvion 응답에 대한 응답으로 WURFL을 JavaScript 스 니펫 으로도 사용할 수 있다는 점도 언급 할 가치가 있습니다 .

wurfl.io 에서 제공되는 무료 버전 에서는 화면 및 해상도에 대한 정보를 얻을 수 없지만 (기기 이름, 폼 팩터 및 모바일 / 모바일 아님) 여기 에서 더 많은 기능을 사용할 수 있는 상용 버전도 있습니다 .

CSS 픽셀은 실제로 "장치 독립 픽셀"이 아닙니다. 웹 플랫폼은 다양한 장치 유형으로 구성됩니다. CSS 픽셀은 핸드 헬드에서 상당히 일관된 것처럼 보이지만 일반적인 96dpi 데스크톱 모니터에서는 50 % 더 커집니다. 내 질문을 참조하십시오 . 이것은 어떤 경우에는 정말 나쁜 일이 아닙니다. 예를 들어 눈까지의 거리가 더 멀기 때문에 더 큰 화면에서는 글꼴이 더 커야합니다. 그러나 UI 요소 크기는 상당히 일관 적이어야합니다. 앱에 상단 표시 줄이 있다고 가정 해 보겠습니다. 데스크톱과 모바일에서 동일한 두께를 원한다고 가정 해 보겠습니다. 기본적으로 터치 가능한 요소가 더 커야하므로 좋지 않은 50 % 더 작습니다. 내가 찾은 유일한 해결 방법은 장치 DPI에 따라 다른 스타일을 적용하는 것입니다.

window.devicePixelRatio를 사용하여 JavaScript에서 화면 DPI를 얻을 수 있습니다. 또는 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의 구현이 너무 어렵지 않을 것이라고 생각합니다.

귀하의 의견에서 버튼 등이 뷰어에게 표시되는 크기에 실제로 관심이 있음을 발견했습니다.

나는 초기 크기를 설정하기 위해 HTML 헤더에 메타 태그를 추가하는 문제라는 것을 발견 할 때까지 동일한 문제를 겪고있었습니다.

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

요소의 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

getPPI () 함수 ( 모바일 웹 : 물리적 픽셀 크기를 얻는 방법? )를 사용하여 1 인치 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>

Heh 내가 이것에 답할 수 있기를 바라지 만 API를 구축하는 괴짜들은 기본 필수품을 제공하지 않고 때때로 너무 많은 추상화를 제공하지 않습니다.

BTW 저는 40 년 동안의 UI 및 소프트웨어 디자인 경험을 가지고 있으며 "VESA"드라이버가 등장하기 전부터 영원히 보이는 것을 위해 이것을 갖도록 노력해 왔습니다. :).

터치 스크린의 경우 "fingerSize ()"라는 것이 있는데, 픽셀 수는 1cm (손가락의 평균 터치 면적의 지름에 매우 가깝습니다)이지만 루트 데이터는 "dpcm"입니다.

디스플레이에 대해 원하는 또 다른 것은 "화각"입니다.보기 및 터치 기능을위한 디스플레이 장치 유형은 시청 거리를 거의 정의합니다.

    (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에서 제공하려고하는 것입니다.하지만 아쉽게도 많은 경우 얻기가 어렵습니다.

대략적인 크기를 추정 할 수 있지만 정확하지는 않습니다.

결과가 무엇인지 확인하기 위해 몇 가지 장치에서 테스트 한 예제를 모았습니다. 내 iPhone 6은 약 33 % 더 큰 값을 반환합니다. Mac의 27 형 데스크탑 모니터가 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);

http://codepen.io/kus/full/xOAPYB/