Nhận kích thước màn hình vật lý / dpi / mật độ pixel trong Chrome trên Android

Question 1

Câu hỏi

Có cách nào an toàn để có được kích thước vật lý màn hình thực sự chính xác trong Chrome, trên Android không? Nếu cần, có thể để các phiên bản cũ của Chrome và Android nằm ngoài phạm vi sử dụng.

Nghiên cứu trước

Có rất nhiều câu hỏi cuối cùng trên stackoverflow về việc lấy kích thước màn hình thực tế của một thiết bị từ bên trong javascript (hoặc css). Có vẻ như không có sự hội tụ giữa tiêu chuẩn hóa api html và triển khai trình duyệt thực tế, chưa kể đến việc triển khai trình duyệt dựa vào api hệ điều hành mà lần lượt dựa vào phần cứng cung cấp thông tin phù hợp.

Nhân tiện, một số câu trả lời trước đây khá phức tạp (năm 2011 và tương tự) trong việc giả định một mật độ pixel nhất định thịnh hành vào thời điểm đó và do đó vô dụng. Những người khác liên quan đến webkit trong khi Chrome nhấp nháy có thể đã thay thế webkit trong chrome (?).

Tôi muốn khám phá sự tồn tại của một giải pháp đơn giản bằng cách giới hạn mọi thứ chỉ với Chrome trên Android.

Ghi chú

Đây là tất cả về giải pháp javascript (hoặc css) bên trong trình duyệt, không phải là giải pháp cho ứng dụng gốc.

Question 2

Bạn không thể thực sự có được kích thước vật lý thực hoặc DPI thực tế và ngay cả khi bạn có thể, bạn cũng không thể làm gì với chúng.

Đây là một câu chuyện khá dài và phức tạp, vì vậy hãy tha thứ cho tôi.

Web và tất cả các trình duyệt xác định 1px là một đơn vị được gọi là pixel CSS. Một pixel CSS không phải là một pixel thực, mà là một đơn vị được coi là 1/96 inch dựa trên góc nhìn của thiết bị. Điều này được chỉ định làm pixel tham chiếu .

Pixel tham chiếu là góc trực quan của một pixel trên thiết bị có mật độ pixel là 96dpi và cách đầu đọc độ dài một sải tay. Đối với chiều dài danh nghĩa của một cánh tay là 28 inch, do đó, góc trực quan là khoảng 0,0213 độ. Để đọc ở độ dài của cánh tay, 1px tương ứng với khoảng 0,26 mm (1/96 inch).

Trong không gian 0,26mm, chúng ta có thể có rất nhiều pixel thiết bị thực.

Trình duyệt thực hiện điều này chủ yếu vì các lý do cũ - hầu hết các màn hình đều là 96dpi khi web ra đời - nhưng cũng vì tính nhất quán, trong "ngày xưa", nút 22px trên màn hình 15 inch ở 800x600 sẽ gấp đôi kích thước của nút 22px trên màn hình 15 inch ở 1600x1200. Trong trường hợp này, DPI của màn hình thực sự là 2x (gấp đôi độ phân giải theo chiều ngang nhưng trong cùng một không gian vật lý). Đây là một tình huống tồi tệ đối với web và ứng dụng, vì vậy hầu hết các hệ điều hành đã nghĩ ra nhiều cách để trừu tượng hóa các giá trị pixel vào các đơn vị độc lập của thiết bị (DIPS trên Android, PT trên iOS và CSS Pixel trên web ).

Trình duyệt Safari trên iPhone là trình duyệt đầu tiên (theo hiểu biết của tôi) giới thiệu khái niệm về khung nhìn. Điều này được tạo ra để cho phép các ứng dụng kiểu máy tính để bàn hoàn chỉnh hiển thị trên một màn hình nhỏ. Chế độ xem được xác định là rộng 960px. Về cơ bản, điều này đã phóng to trang ra 3 lần (iphone ban đầu là 320px) vì vậy 1 pixel CSS bằng 1/3 pixel vật lý. Mặc dù vậy, khi bạn xác định một chế độ xem, bạn có thể làm cho thiết bị này khớp với 1 pixel CSS = 1 pixel thực ở 163dpi.

Bằng cách sử dụng chế độ xem có chiều rộng là "chiều rộng thiết bị" giúp bạn giải phóng khỏi việc phải đặt chiều rộng của chế độ xem trên cơ sở từng thiết bị thành kích thước pixel CSS tối ưu, trình duyệt sẽ làm điều đó cho bạn.

Với sự ra đời của các thiết bị DPI gấp đôi, các nhà sản xuất điện thoại di động không muốn các trang trên thiết bị di động nhỏ hơn 50% vì vậy họ đã giới thiệu một khái niệm gọi là devicePixelRatio (đầu tiên là trên bộ web dành cho thiết bị di động), điều này cho phép họ giữ 1 pixel CSS tương đương 1 / 96 inch nhưng cho bạn hiểu rằng nội dung của bạn như hình ảnh có thể cần phải có kích thước gấp đôi. Nếu bạn nhìn vào dòng iPhone, tất cả các thiết bị của họ đều nói rằng chiều rộng của màn hình tính bằng pixel CSS là 320px mặc dù chúng ta biết điều này không đúng.

Do đó, nếu bạn tạo một nút thành 22px trong không gian CSS, thì biểu diễn trên màn hình vật lý là tỷ lệ pixel thiết bị 22 *. Thực ra tôi nói thế này, nó không hẳn là thế này vì tỷ lệ pixel của thiết bị cũng không bao giờ chính xác, các nhà sản xuất điện thoại đặt nó thành một số đẹp như 2.0, 3.0 chứ không phải là 2.1329857289918….

Tóm lại, các pixel CSS độc lập với thiết bị và chúng ta không phải lo lắng về kích thước vật lý của màn hình và mật độ hiển thị, v.v.

Đạo lý của câu chuyện là: Đừng lo lắng về việc hiểu kích thước pixel vật lý của màn hình. Bạn không cần nó. 50px trông gần giống nhau trên tất cả các thiết bị di động, nó có thể khác một chút, nhưng CSS Pixel là cách độc lập với thiết bị của chúng tôi để tạo các tài liệu và giao diện người dùng nhất quán

Tài nguyên:

Question 3

Dựa trên câu trả lời của Matt, tôi đã làm một bài kiểm tra:

// 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\"?");

Đây là đầu ra:

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

Không.

Vì vậy, dường như vẫn chưa có cách nào để có được các giá trị vật lý thực trong trình duyệt web.

Question 4

Bạn có thể tạo bất kỳ phần tử trang nào và đặt chiều rộng của nó bằng các đơn vị vật lý thực. Ví dụ

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

Và sau đó lấy chiều rộng của nó bằng pixel. Ví dụ: mã html bên dưới (tôi đã sử dụng JQuery) hiển thị chiều rộng màn hình thiết bị tính bằng cm

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

alert(widthCM);
</script>

Question 5

Bạn có thể nhận được thông tin đó với WURFL:

Thuộc tính hiển thị thiết bị

Các thuộc tính được gọi là:

resolution_(width|height)

physical_display_(width|height)

Phiên bản dài:

Chiến lược tốt nhất và đáng tin cậy nhất để đạt được điều này là gửi user agent stringtừ trình duyệt đến một DB như WURFL(hoặc một DB khác) cập nhật có thể cung cấp thông tin cần thiết.

Chuỗi tác nhân người dùng

Đây là một phần thông tin mà tất cả các trình duyệt hiện đại có thể cung cấp; nó tiết lộ thông tin về thiết bị và hệ điều hành. Nó chỉ là không đủ ý nghĩa cho ứng dụng của bạn nếu không có sự trợ giúp của từ điển như WURFL.

WURFL

Đây là cơ sở dữ liệu thường được sử dụng để phát hiện các thuộc tính của thiết bị.

Với nó, bạn có thể hỗ trợ chính xác hầu hết các thiết bị phổ biến trên thị trường. Tôi sẽ đăng một bản demo mã nhưng một bản có sẵn với tải xuống trên WURFLtrang web. Bạn có thể tìm thấy một bản trình diễn như vậy trên thư mục ví dụ / bản trình diễn được tải xuống cùng với thư viện.

Tải xuống WURFL

Dưới đây là thêm thông tin và giải thích về cách kiểm tra kích thước và độ phân giải vật lý: http://www.scientiamobile.com/forum/viewtopic.php?f=16&t=286

Question 6

Để bổ sung cho câu trả lời "không có giải pháp tốt cho vấn đề này", chỉ cần kiểm tra các đơn vị bạn có thể sử dụng trên 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.

Với mô tả này, có vẻ như có một giải pháp. cm, mmvà insẽ được sử dụng để vẽ thứ gì đó có cùng kích thước độc lập với kích thước và độ phân giải màn hình. Với điều này trong tâm trí, bạn có thể hy vọng rằng ít nhất một trong px, pthoặc pccó thể được sử dụng để vẽ ở mức pixel, cho bất cứ điều gì chính xác bạn muốn sử dụng (nếu không, các điểm trên có hàng triệu điểm ảnh, đúng là những gì?). Ồ không. Tất cả các đơn vị đều là phân số của một đơn vị hệ mét, làm cho tất cả các đơn vị này chỉ là các thang đo khác nhau. Và điều tồi tệ nhất trong câu chuyện là thực tế là không có điều nào trong số này là chính xác. Chỉ cần chơi với ví dụ w3schools (vẽ một đoạn thẳng dài 20cm và đo bằng thước).

Vì vậy, cuối cùng thì: - không có cách nào để vẽ một cái gì đó với kích thước vật lý một cách chính xác (mà phải là trường hợp với cm, mm, in, và cuối cùng ptvà pc). - không có cách nào để vẽ thứ gì đó có cùng kích thước một cách độc lập với kích thước và độ phân giải màn hình (ít nhất cũng phải như vậy px).

Đây là cả vấn đề triển khai (kích thước màn hình thực tế không được sử dụng) và vấn đề thiết kế (tại sao phải pxđộc lập với kích thước màn hình trong khi đã có rất nhiều đơn vị cho điều đó).

Question 7

Tôi đã giải quyết vấn đề này bằng một trong những dự án web của mình http://www.vinodiscover.com Câu trả lời là bạn không thể biết chắc chắn kích thước vật lý là bao nhiêu, nhưng bạn có thể lấy một con số gần đúng. Sử dụng JS và / hoặc CSS, bạn có thể tìm thấy chiều rộng và chiều cao của khung nhìn / màn hình và mật độ pixel bằng cách sử dụng các truy vấn phương tiện. Ví dụ: iPhone 5 (326 ppi) = 320px x 568px và mật độ điểm ảnh 2.0, trong khi Samsung Galaxy S4 (441ppi) = 360px x 640px và mật độ điểm ảnh 3.0. Thực tế, mật độ điểm ảnh 1,0 là khoảng 150 ppi.

Với điều này, tôi đặt CSS của mình hiển thị 1 cột khi chiều rộng nhỏ hơn 284px, bất kể mật độ pixel; sau đó là hai cột từ 284px đến 568px; sau đó 3 cột trên 852px. Nó có vẻ đơn giản hơn nhiều, vì các trình duyệt hiện thực hiện tính toán mật độ pixel tự động.

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

Question 8

Như một câu trả lời cho câu trả lời của zehelvion về việc sử dụng WURFL để tìm độ phân giải, điều đáng nói là WURFL cũng có sẵn dưới dạng đoạn mã JavaScript .

Trong phiên bản miễn phí được cung cấp tại wurfl.io , bạn sẽ không nhận được thông tin về màn hình và độ phân giải (chỉ tên thiết bị, hệ số hình thức và thiết bị di động / không di động), nhưng cũng có một phiên bản thương mại với nhiều khả năng hơn có sẵn ở đây .

Question 9

Các pixel CSS không thực sự là "pixel độc lập với thiết bị" của chúng tôi. Nền tảng web bao gồm nhiều loại thiết bị. Trong khi CSS pixel có vẻ khá nhất quán trên thiết bị cầm tay, nó sẽ lớn hơn 50% trên màn hình máy tính để bàn 96dpi điển hình. Xem câu hỏi của tôi . Đây thực sự không phải là một điều xấu trong một số trường hợp, ví dụ như phông chữ phải lớn hơn trên màn hình lớn hơn, vì khoảng cách đến mắt lớn hơn. Nhưng kích thước phần tử ui phải khá nhất quán. Giả sử ứng dụng của bạn có thanh trên cùng, bạn muốn nó có cùng độ dày trên máy tính để bàn và điện thoại di động, theo mặc định, nó sẽ nhỏ hơn 50%, điều này không tốt, vì các phần tử có thể chạm phải lớn hơn. Cách giải quyết duy nhất mà tôi đã tìm thấy là áp dụng các kiểu khác nhau dựa trên DPI của thiết bị.

Bạn có thể lấy DPI màn hình bằng JavaScript với window.devicePixelRatio. Hoặc truy vấn 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*/
    }

Mặc dù vậy, tôi không biết việc áp dụng điều này sẽ hoạt động như thế nào trên màn hình máy tính để bàn dpi cao. Có lẽ các phần tử sẽ quá nhỏ. Thực sự đáng tiếc khi nền tảng web không cung cấp bất cứ điều gì tốt hơn. Tôi đoán rằng việc thực hiện nhúng sẽ không quá khó.

Question 10

Tôi nhận thấy trong nhận xét của bạn rằng bạn thực sự quan tâm đến kích thước mà các nút, v.v. xuất hiện với người xem.

Tôi cũng gặp phải vấn đề tương tự, cho đến khi tôi phát hiện ra rằng việc thêm thẻ meta vào tiêu đề HTML để đặt quy mô ban đầu:

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

Question 11

JqueryMobile chiều rộng của phần tử

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

JqueryMobile Chiều cao của phần tử

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

Chúc may mắn Danny117

Question 12

Sử dụng hàm getPPI () ( Web di động: cách lấy kích thước pixel vật lý? ), Để lấy id một inch, hãy sử dụng công thức sau:

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

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

Question 13

Heh ước tôi có thể trả lời điều này nhưng các API xây dựng lập trình viên lập trình không cung cấp các nhu cầu cơ bản và những thứ trừu tượng đôi khi hơi quá.

BTW Tôi có 40 năm kinh nghiệm thiết kế giao diện người dùng và thiết kế phần mềm và đã cố gắng để có được điều này cho những gì có vẻ như mãi mãi kể từ trước những ngày của trình điều khiển "VESA" :).

Đối với màn hình cảm ứng, tôi có một thứ mà tôi gọi là "fingerSize ()" là số điểm ảnh là 1cm (rất gần với đường kính của diện tích cảm ứng trung bình của ngón tay) nhưng tiêu chuẩn gốc là "dpcm".

Điều khác bạn muốn cho màn hình là "góc nhìn" Loại thiết bị hiển thị cho chức năng xem và cảm ứng xác định khá nhiều khoảng cách xem.

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

Đây là những gì chúng tôi cố gắng cung cấp trong các API của mình Nhưng rất khó để có được trong nhiều trường hợp.

Question 14

Bạn có thể ước tính sơ bộ về kích thước, nhưng nó không chính xác.

Tôi đã tổng hợp một ví dụ mà tôi đã thử nghiệm trên một vài thiết bị để xem kết quả như thế nào. IPhone 6 của tôi trả về giá trị lớn hơn khoảng 33%. Màn hình máy tính để bàn 27 "trên máy Mac của tôi được báo cáo là màn hình 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);

Mở rộng đoạn mã

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