[android] Android의 Chrome에서 실제 화면 크기 / dpi / 픽셀 밀도 가져 오기

Program / 글쓴이

질문

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 였지만 일관성을 위해 “예전에는”800×600의 15 인치 화면에있는 22px 버튼이 22px 버튼 크기의 두 배가되었습니다. 1600×1200의 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를 빌드하는 장치 독립적 인 방법입니다.

자원:

답변

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) = 320×568 픽셀 및 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 에서 제공되는 무료 버전 에서는 화면 및 해상도에 대한 정보를 얻을 수 없지만 (기기 이름, 폼 팩터 및 모바일 / 모바일 아님) 여기 에서 더 많은 기능을 사용할 수 있는 상용 버전도 있습니다 .