Pertanyaan

Apakah ada cara aman untuk mendapatkan dimensi fisik layar yang benar di Chrome, di Android? Jika perlu, versi lama Chrome dan Android dapat diabaikan.

Penelitian sebelumnya

Ada banyak pertanyaan buntu tentang stackoverflow tentang mendapatkan dimensi layar fisik yang sebenarnya dari suatu perangkat dari dalam javascript (atau css). Sepertinya tidak ada konvergensi antara standarisasi api html dan implementasi browser yang sebenarnya di dalamnya, belum lagi implementasi browser mengandalkan OS api yang pada gilirannya mengandalkan perangkat keras yang memberikan informasi yang benar.

Beberapa jawaban sebelumnya masih misterius (tahun 2011 dan sejenisnya) dengan asumsi kepadatan piksel tertentu yang berlaku pada saat itu, dan oleh karena itu tidak berguna. Lainnya terkait dengan webkit sedangkan Chrome blink mungkin telah menggantikan webkit di chrome (?).

Saya ingin menjelajahi keberadaan solusi sederhana dengan membatasi hal-hal hanya pada Chrome di Android.

Catatan

Ini semua tentang solusi javascript (atau css) di dalam browser, bukan solusi untuk aplikasi asli.

Anda tidak dapat benar-benar mendapatkan dimensi fisik yang sebenarnya atau DPI yang sebenarnya dan bahkan jika Anda bisa, Anda tidak dapat melakukan apa pun dengannya.

Ini adalah cerita yang cukup panjang dan rumit, jadi maafkan saya.

Web dan semua browser mendefinisikan 1px sebagai unit yang disebut piksel CSS. Piksel CSS bukanlah piksel nyata, melainkan unit yang dianggap 1/96 inci berdasarkan sudut pandang perangkat. Ini ditentukan sebagai piksel referensi .

Pixel referensi adalah sudut visual satu piksel pada perangkat dengan kepadatan piksel 96dpi dan jarak dari pembaca sejauh lengan. Untuk panjang lengan nominal 28 inci, sudut visualnya sekitar 0,0213 derajat. Untuk membaca pada panjang lengan, 1px sama dengan sekitar 0,26 mm (1/96 inci).

Dalam ruang 0,26mm kami mungkin memiliki sangat banyak piksel perangkat nyata.

Browser melakukan ini terutama karena alasan lama - sebagian besar monitor berukuran 96dpi saat web lahir - tetapi juga untuk konsistensi, di "masa lalu" tombol 22px pada layar 15 inci pada 800x600 akan menjadi dua kali ukuran tombol 22px pada monitor 15 inci dengan ukuran 1600x1200. Dalam hal ini DPI layar sebenarnya 2x (resolusi dua kali lipat secara horizontal tetapi dalam ruang fisik yang sama). Ini adalah situasi yang buruk untuk web dan aplikasi, sehingga sebagian besar sistem operasi menemukan banyak cara untuk mengabstraksi nilai piksel ke unit independen perangkat (DIPS di Android, PT di iOS dan CSS Pixel di web ).

Browser iPhone Safari adalah yang pertama (sepengetahuan saya) yang memperkenalkan konsep viewport. Ini dibuat untuk mengaktifkan aplikasi gaya desktop penuh untuk dirender di layar kecil. Area pandang ditetapkan dengan lebar 960 piksel. Ini pada dasarnya memperbesar halaman 3x (iphone awalnya 320px) jadi 1 piksel CSS adalah 1/3 dari piksel fisik. Saat Anda menentukan area pandang meskipun Anda bisa membuat perangkat ini cocok dengan 1 piksel CSS = 1 piksel nyata pada 163dpi.

Dengan menggunakan area pandang yang lebarnya "lebar perangkat" membebaskan Anda dari keharusan menyetel lebar area pandang per perangkat menjadi ukuran piksel CSS yang optimal, browser hanya melakukannya untuk Anda.

Dengan diperkenalkannya perangkat DPI ganda, produsen ponsel tidak ingin halaman seluler tampil 50% lebih kecil sehingga mereka memperkenalkan konsep yang disebut devicePixelRatio (pertama di webkit seluler saya yakin), ini memungkinkan mereka mempertahankan 1 piksel CSS menjadi kira-kira 1 / 96 inci tetapi biarkan Anda memahami bahwa aset Anda seperti gambar mungkin perlu berukuran dua kali lipat. Jika Anda melihat seri iPhone, semua perangkat mereka mengatakan lebar layar dalam piksel CSS adalah 320px meskipun kami tahu ini tidak benar.

Oleh karena itu, jika Anda membuat tombol menjadi 22px dalam ruang CSS, representasi pada layar fisik adalah rasio piksel perangkat 22 *. Sebenarnya saya mengatakan ini, bukan ini karena rasio piksel perangkat juga tidak pernah pasti, pabrikan ponsel menetapkannya ke angka yang bagus seperti 2.0, 3.0 daripada 2.1329857289918 ....

Singkatnya, piksel CSS tidak bergantung pada perangkat dan tidak perlu khawatir tentang ukuran fisik layar dan kepadatan tampilan, dll.

Moral dari cerita ini adalah: Jangan khawatir tentang memahami ukuran piksel fisik layar. Anda tidak membutuhkannya. 50px seharusnya terlihat kurang lebih sama di semua perangkat seluler. Ini mungkin sedikit berbeda, tetapi CSS Pixel adalah cara independen perangkat kami untuk membuat dokumen dan UI yang konsisten.

Sumber:

• 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

Berdasarkan jawaban Matt, saya melakukan tes:

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

Ini adalah keluarannya:

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

Nggak.

Jadi tampaknya belum ada cara untuk mendapatkan nilai fisik yang nyata di browser web.

Anda dapat membuat elemen halaman apa pun dan menyetel lebarnya menggunakan unit fisik nyata. Sebagai contoh

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

Dan kemudian dapatkan lebarnya dalam piksel. Misalnya kode html di bawah ini (saya menggunakan JQuery) menunjukkan lebar layar perangkat dalam sentimeter

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

alert(widthCM);
</script>

Anda bisa mendapatkan info itu dengan WURFL:

Properti tampilan perangkat

Atribut tersebut disebut:

resolution_(width|height)

physical_display_(width|height)

Versi panjang:

Strategi terbaik dan paling andal untuk mencapai hal ini adalah dengan mengirim user agent stringdari browser ke DB seperti WURFL(atau lainnya) DB terbaru yang dapat memberikan informasi yang dibutuhkan.

String Agen Pengguna

Ini adalah bagian informasi yang dapat disediakan oleh semua browser modern; itu memaparkan informasi tentang perangkat dan OS itu. Itu tidak cukup berarti untuk aplikasi Anda tanpa bantuan kamus seperti itu WURFL.

WURFL

Ini adalah database yang biasa digunakan untuk mendeteksi properti perangkat.

Dengannya, Anda mungkin dapat mendukung secara akurat sebagian besar perangkat populer di pasar. Saya akan memposting demo kode tetapi tersedia dengan unduhan di WURFLsitus. Anda dapat menemukan demo seperti itu di folder contoh / demo yang diunduh dengan perpustakaan.

Unduh WURFL

Berikut informasi dan penjelasan lebih lanjut tentang memeriksa ukuran fisik dan resolusi: http://www.scientiamobile.com/forum/viewtopic.php?f=16&t=286

Sebagai pelengkap dari jawaban "tidak ada solusi yang baik untuk masalah ini", cukup periksa unit yang dapat Anda gunakan di 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.

Dengan uraian ini sepertinya ada solusinya. cm, mmdan inakan digunakan untuk menggambar sesuatu dengan ukuran yang sama secara terpisah dari ukuran dan resolusi layar. Dengan pemikiran ini, Anda dapat mengharapkan bahwa setidaknya satu px, ptatau pcdapat digunakan untuk menggambar pada tingkat piksel, untuk presisi apa pun yang ingin Anda gunakan (jika tidak, apa gunanya memiliki jutaan piksel, bukan?). Tidak. Semua satuan adalah pecahan dari satuan metrik, membuat semua satuan ini memiliki skala yang berbeda. Dan yang terburuk dalam cerita ini adalah kenyataan bahwa tidak ada satupun yang akurat. Mainkan saja dengan contoh w3schools (gambar garis 20cm dan ukur dengan penggaris).

Jadi pada akhirnya: - tidak ada cara untuk menggambar sesuatu dengan dimensi fisik secara akurat (yang seharusnya menjadi kasus dengan cm, mm, in, dan akhirnya ptdan pc). - tidak ada cara untuk menggambar sesuatu dengan ukuran yang sama secara terpisah dari ukuran dan resolusi layar (setidaknya harus demikian px).

Ini adalah masalah implementasi (ukuran layar sebenarnya tidak digunakan) dan masalah desain (mengapa harus pxindependen dari ukuran layar sementara sudah ada begitu banyak unit untuk itu).

Saya menangani masalah ini dengan salah satu proyek web saya http://www.vinodiscover.com Jawabannya adalah Anda tidak dapat mengetahui dengan pasti apa ukuran fisiknya, tetapi Anda bisa mendapatkan perkiraannya. Dengan menggunakan JS dan / atau CSS, Anda dapat menemukan lebar dan tinggi viewport / layar, dan kepadatan piksel menggunakan kueri media. Misalnya: iPhone 5 (326 ppi) = 320px kali 568px dan kepadatan 2.0 pixel, sedangkan Samsung Galaxy S4 (441ppi) = 360px x 640px dan kepadatan 3.0 pixel. Secara efektif, kepadatan piksel 1,0 adalah sekitar 150 ppi.

Dengan ini, saya mengatur CSS saya untuk menampilkan 1 kolom ketika lebarnya kurang dari 284px, terlepas dari kerapatan piksel; lalu dua kolom antara 284px dan 568px; lalu 3 kolom di atas 852px. Ini jauh lebih sederhana dari kelihatannya, karena browser sekarang melakukan penghitungan kepadatan piksel secara otomatis.

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

Sebagai tanggapan atas balasan zehelvion tentang penggunaan WURFL untuk menemukan resolusi, perlu disebutkan juga bahwa WURFL juga tersedia sebagai cuplikan JavaScript .

Dalam edisi gratis yang ditawarkan di wurfl.io , Anda tidak akan mendapatkan informasi tentang layar dan resolusi (hanya nama perangkat, faktor bentuk dan ponsel / bukan ponsel), tetapi ada juga versi komersial dengan kemampuan lebih tersedia di sini .

Piksel CSS sebenarnya bukan "piksel perangkat independen" kami. Platform web terdiri dari berbagai jenis perangkat. Meskipun piksel CSS tampak cukup konsisten pada perangkat genggam, piksel tersebut akan menjadi 50% lebih besar pada monitor desktop 96dpi pada umumnya. Lihat pertanyaan saya . Ini sebenarnya bukan hal yang buruk dalam beberapa kasus, misalnya font harus lebih besar pada layar yang lebih besar, karena jarak ke mata lebih besar. Tetapi dimensi elemen ui harus cukup konsisten. Katakanlah aplikasi Anda memiliki bilah atas, Anda lebih suka memiliki ketebalan yang sama di desktop dan seluler, secara default akan menjadi 50% lebih kecil, yang tidak bagus, karena elemen yang dapat disentuh harus lebih besar. Satu-satunya solusi yang saya temukan adalah menerapkan gaya yang berbeda berdasarkan DPI perangkat.

Anda bisa mendapatkan DPI layar dalam JavaScript dengan window.devicePixelRatio. Atau kueri 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*/
    }

Saya tidak tahu bagaimana menerapkan ini akan bekerja pada monitor desktop dpi tinggi. Mungkin elemennya terlalu kecil. Sungguh memalukan bahwa platform web tidak menawarkan sesuatu yang lebih baik. Saya kira penerapan penurunan tidak akan terlalu sulit.

Saya perhatikan dalam komentar Anda bahwa Anda benar-benar prihatin dengan ukuran tombol dan sebagainya yang tampak bagi pemirsa.

Saya mengalami masalah yang sama, sampai saya menemukan bahwa itu hanya masalah menambahkan tag meta ke header HTML untuk mengatur skala awal:

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

Lebar elemen JqueryMobile

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

Tinggi elemen JqueryMobile

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

Semoga Sukses Danny117

Menggunakan fungsi getPPI () ( Web seluler: bagaimana cara mendapatkan ukuran piksel fisik? ), Untuk mendapatkan id satu inci gunakan rumus ini:

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 berharap saya bisa menjawab ini tetapi API pembuat geeks tidak menyediakan kebutuhan dasar dan hal-hal abstrak terlalu banyak di kali.

BTW Saya memiliki 40 tahun pengalaman desain UI dan desain perangkat lunak dan telah mendorong untuk memiliki ini untuk apa yang tampak seperti selamanya sejak sebelum zaman driver "VESA" :).

Untuk layar sentuh saya memiliki sesuatu yang saya sebut "fingerSize ()" yang mana jumlah piksel menjadi 1cm (sangat dekat dengan diameter area sentuh rata-rata jari) tetapi datmum root adalah "dpcm".

Hal lain yang Anda inginkan untuk tampilan adalah "sudut pandang". Jenis perangkat tampilan untuk fungsi tampilan dan sentuh cukup banyak menentukan jarak pandang.

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

Inilah yang kami coba sediakan di API kami Namun sayangnya sulit didapat dalam banyak kasus.

Anda bisa mendapatkan perkiraan ukuran secara kasar, tetapi itu tidak akurat.

Saya telah mengumpulkan contoh yang telah saya uji pada beberapa perangkat untuk melihat hasilnya. IPhone 6 saya mengembalikan nilai sekitar 33% lebih besar. Monitor desktop 27 "saya di Mac saya dilaporkan sebagai monitor 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/