Soru

Android'de Chrome'da gerçekten doğru ekran fiziksel boyutlarını almanın güvenli bir yolu var mı? Gerekirse, Chrome ve Android'in eski sürümleri kapsam dışında bırakılabilir.

Önceki araştırma

Bir cihazın gerçek fiziksel ekran boyutlarını javascript (veya css) içinden almakla ilgili stackoverflow hakkında çok sayıda çıkmaz soru vardır. Görünüşe göre html api standardizasyonu ile gerçek tarayıcı uygulamaları arasında bir yakınlaşma yok, tarayıcı uygulamasının OS API'lere dayandığından bahsetmiyorum bile, bu da doğru bilgiyi sağlayan donanıma dayanıyor.

Bu arada bazı önceki cevaplar, o sırada geçerli olan belirli bir piksel yoğunluğunu ve bu nedenle faydasız olduğunu varsaymak açısından gizemli (2011 yılı ve benzeri). Diğerleri webkit ile ilgilidir, oysa Chrome blink, Chrome'daki webkit'in yerini almış olabilir (?).

İşleri yalnızca Android'deki Chrome ile sınırlandırarak basit bir çözümün varlığını keşfetmek istiyorum.

Not

Bu, yerel bir uygulama için bir çözüm değil, tarayıcının içindeki bir javascript (veya css) çözümü ile ilgilidir.

Gerçek fiziksel boyutları veya gerçek DPI'yı gerçekten elde edemezsiniz ve yapabilseniz bile onlarla hiçbir şey yapamazsınız.

Bu oldukça uzun ve karmaşık bir hikaye, bu yüzden beni affet.

Web ve tüm tarayıcılar 1px'i CSS pikseli adı verilen bir birim olarak tanımlar. Bir CSS pikseli gerçek bir piksel değil, cihazın görüş açısına bağlı olarak bir inçin 1 / 96'sı olarak kabul edilen bir birimdir. Bu bir referans pikseli olarak belirtilir .

Referans piksel, piksel yoğunluğu 96 dpi olan ve okuyucudan bir kol uzunluğu kadar olan bir cihazdaki bir pikselin görsel açısıdır. 28 inçlik nominal bir kol uzunluğu için, görsel açı bu nedenle yaklaşık 0.0213 derecedir. Kol uzunluğunda okumak için, 1 piksel, yaklaşık 0,26 mm'ye (1/96 inç) karşılık gelir.

0.26 mm'lik bir alanda çok fazla gerçek cihaz pikselimiz olabilir.

Tarayıcı bunu temel olarak eski nedenlerle yapıyor - web doğduğunda çoğu monitör 96 dpi idi - ancak aynı zamanda tutarlılık için, "eski günlerde" 800x600'de 15 inçlik bir ekranda 22px'lik bir düğme, 22px düğmesinin iki katı büyüklüğünde olurdu. 1600x1200 çözünürlükte 15 inçlik bir monitör. Bu durumda, ekranın DPI değeri aslında 2x'tir (yatay olarak ancak aynı fiziksel alanda iki kat çözünürlük). Bu, web ve uygulamalar için kötü bir durumdur, bu nedenle çoğu işletim sistemi, piksel değerlerini cihazdan bağımsız birimlere soyutlamanın birçok yolunu tasarladı (Android'de DIPS, iOS'ta PT ve web'de CSS Piksel ).

İPhone Safari tarayıcısı, bir görüntü alanı konseptini tanıtan ilk (bildiğim kadarıyla) oldu. Bu, tam masaüstü tarzı uygulamaların küçük bir ekranda görüntülenmesini sağlamak için oluşturulmuştur. Görüntü alanı 960 piksel genişliğinde olacak şekilde tanımlandı. Bu, esasen sayfayı 3 kat uzaklaştırdı (iphone orijinal olarak 320 piksel idi), bu nedenle 1 CSS pikseli, fiziksel bir pikselin 1 / 3'üdür. Bir görüntü alanı tanımladığınızda, bu cihazı 1 CSS pikseli = 163dpi'de 1 gerçek pikselle eşleştirebilirsiniz.

Genişliğin "cihaz genişliği" olduğu bir görüntü alanını kullanmak, sizi görüntü alanının genişliğini cihaz başına en uygun CSS piksel boyutuna ayarlamak zorunda kalmaktan kurtarır, tarayıcı bunu sizin için yapar.

Çift DPI cihazlarının piyasaya sürülmesiyle, cep telefonu üreticileri, mobil sayfaların% 50 daha küçük görünmesini istemediler, bu nedenle devicePixelRatio (ilk inandığım mobil webkit'te) adlı bir konsept geliştirdiler, bu da 1 CSS pikselinin kabaca 1 / Bir inçin 96'da biri, ancak görüntüler gibi varlıklarınızın iki kat daha büyük olması gerektiğini anlamanıza izin verin. İPhone serisine bakarsanız, tüm cihazlarının CSS piksellerinde ekranın genişliğinin 320px olduğunu söylüyor, bunun doğru olmadığını bilsek bile.

Bu nedenle, CSS alanında 22px olacak bir düğme yaptıysanız, fiziksel ekrandaki gösterim 22 * ​​cihaz piksel oranıdır. Aslında bunu söylüyorum, tam olarak bu değil çünkü cihaz piksel oranı da asla kesin değil, telefon üreticileri bunu 2.1329857289918 yerine 2.0, 3.0 gibi güzel bir sayıya ayarladı ...

Özetle, CSS pikselleri cihazdan bağımsızdır ve ekranların fiziksel boyutları ve görüntü yoğunlukları vb. Hakkında endişelenmemize gerek kalmaz.

Hikayenin ahlakı şudur: Ekranın fiziksel piksel boyutunu anlama konusunda endişelenmeyin. İhtiyacın yok. 50px, tüm mobil cihazlarda aşağı yukarı aynı görünmelidir, biraz değişebilir, ancak CSS Piksel, tutarlı belgeler ve kullanıcı arayüzleri oluşturmak için bizim cihazımızdan bağımsız bir yoldur

Kaynaklar:

• 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'in cevabına göre bir test yaptım:

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

Çıktı şu:

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

Hayır!

Dolayısıyla, bir web tarayıcısında gerçek fiziksel değerleri elde etmenin henüz bir yolu yok gibi görünüyor.

Gerçek fiziksel birimler kullanarak herhangi bir sayfa öğesi oluşturabilir ve genişliğini ayarlayabilirsiniz. Örneğin

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

Ve sonra genişliğini piksel cinsinden alın. Örneğin aşağıdaki html kodu (JQuery kullandım) cihaz ekran genişliğini santimetre cinsinden gösterir

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

alert(widthCM);
</script>

Bu bilgiyi WURFL ile alabilirsiniz:

Cihaz görüntüleme özellikleri

Nitelikler şöyle adlandırılır:

resolution_(width|height)

physical_display_(width|height)

Uzun versiyon:

Bunu başarmak için en iyi ve en güvenilir strateji user agent string, tarayıcıdan WURFLgerekli bilgileri sağlayabilen güncel DB benzeri (veya başka bir) DB'ye göndermektir .

Kullanıcı Aracısı dizesi

Bu, tüm modern tarayıcıların sağlayabileceği bir bilgi parçasıdır; cihaz ve işletim sistemi hakkındaki bilgileri ortaya çıkarır. Gibi bir sözlük yardımı olmadan uygulamanız için yeterince anlamlı değil WURFL.

WURFL

Bu, cihaz özelliklerini tespit etmek için yaygın olarak kullanılan bir veritabanıdır .

Bununla birlikte, piyasadaki popüler cihazların çoğunu doğru bir şekilde destekleyebilirsiniz. Bir kod demosu gönderirdim, ancak bir tanesi WURFLsiteden indirilebilir . Kütüphane ile indirilen örnekler / demo klasöründe böyle bir demo bulabilirsiniz.

WURFL'yi indirin

Fiziksel boyutu ve çözünürlüğü kontrol etmeyle ilgili daha fazla bilgi ve açıklama: http://www.scientiamobile.com/forum/viewtopic.php?f=16&t=286

"Bu sorunun iyi bir çözümü yok" cevabının bir tamamlayıcısı olarak, CSS https://www.w3schools.com/cssref/css_units.asp üzerinde kullanabileceğiniz birimleri kontrol etmeniz yeterlidir.

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.

Bu açıklama ile bir çözüm var gibi görünüyor . cm, mmVe inbağımsız ekran boyutu ve çözünürlüğü aynı boyutta bir şey çizmek için kullanılacaktır. Bu düşünceyle, sen o en az birini bekleyebilirsiniz px, ptveyapc sen kullanıma istiyorum ne olursa olsun hassas piksel düzeyinde çizmek için kullanılabilir, (aksi, sağ, piksel ile milyonlarca üzerinde ne anlamı var?). Hayır. Tüm birimler bir metrik birimin kesirleri olup, tüm bu birimleri yalnızca farklı ölçekler yapar. Ve hikayedeki en kötüsü, bunların hiçbirinin doğru olmamasıdır. Sadece w3schools örneğiyle oynayın (20 cm'lik bir çizgi çizin ve bir cetvelle ölçün).

Yani sonuçta: - (durum olmalıdır doğru fiziksel boyutları ile bir şeyler çizmek için bir yolu yoktur cm, mm, inve sonunda ptve pc). - Ekran boyutundan ve çözünürlükten bağımsız olarak aynı boyutta bir şey çizmenin bir yolu yoktur (en azından durum böyle olmalıdır px).

Bu hem bir uygulama problemi (kullanılmayan gerçek ekran boyutu) hem de tasarım problemidir ( pxbunun için zaten çok fazla birim varken neden ekran boyutundan bağımsız olmalıdır ).

Bu sorunu web projelerimden biriyle ele aldım http://www.vinodiscover.com Yanıt, fiziksel boyutun ne olduğunu kesin olarak bilemeyeceğiniz, ancak bir tahmin edebileceğinizdir. JS ve / veya CSS kullanarak, görüntü alanı / ekranın genişliğini ve yüksekliğini ve medya sorgularını kullanarak piksel yoğunluğunu bulabilirsiniz. Örneğin: iPhone 5 (326 ppi) = 320 piksele 568 piksel ve 2.0 piksel yoğunluğu, Samsung Galaxy S4 (441 ppi) = 360 piksel x 640 piksel ve 3.0 piksel yoğunluğu. Etkili olarak 1.0 piksel yoğunluğu yaklaşık 150 ppi'dir.

Bunu göz önünde bulundurarak, piksel yoğunluğundan bağımsız olarak CSS'mi genişlik 284 pikselden az olduğunda 1 sütun gösterecek şekilde ayarladım; ardından 284px ve 568px arasında iki sütun; ardından 852 pikselin üzerinde 3 sütun. Tarayıcılar artık piksel yoğunluğu hesaplamalarını otomatik olarak yaptığı için göründüğünden çok daha basit.

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

Çözünürlüğü bulmak için WURFL'yi kullanma hakkındaki zehelvion yanıtına bir yanıt olarak, WURFL'nin JavaScript pasajı olarak da mevcut olduğunu belirtmekte fayda var .

Wurfl.io'da sunulan ücretsiz sürümde , ekran ve çözünürlük hakkında bilgi almayacaksınız (yalnızca cihaz adı, form faktörü ve mobil / mobil değil), ancak burada daha fazla özelliğe sahip ticari bir sürüm de var .

CSS pikselleri gerçekten bizim "cihazdan bağımsız pikselimiz" değildir. Web platformu çeşitli cihaz türlerinden oluşur. CSS pikseli, el bilgisayarlarında oldukça tutarlı görünürken, tipik bir 96dpi masaüstü monitörde% 50 daha büyük olacaktır. Soruma bakın . Bu, bazı durumlarda gerçekten kötü bir şey değildir, örneğin yazı tipleri daha büyük bir ekranda daha büyük olmalıdır çünkü göze olan uzaklık daha büyüktür. Ancak kullanıcı arabirimi öğesi boyutları oldukça tutarlı olmalıdır. Diyelim ki uygulamanızın bir üst çubuğu var, masaüstü ve mobil cihazlarda aynı kalınlıkta olmasını tercih edersiniz, varsayılan olarak% 50 daha küçük olacaktır, bu da iyi değildir çünkü dokunulabilir unsurların daha büyük olması gerekir. Bulduğum tek geçici çözüm, cihaz DPI'ya göre farklı stiller uygulamaktır.

Window.devicePixelRatio ile JavaScript'te ekran DPI alabilirsiniz. Veya CSS sorgusu:

@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*/
    }

Yine de bunu uygulamanın yüksek dpi masaüstü monitöründe nasıl çalışacağını bilmiyorum. Belki öğeler çok küçük olabilir. Web platformunun daha iyi bir şey sunmaması gerçekten utanç verici. Sanırım dip uygulaması çok zor olmaz.

Yorumlarınızda, düğmelerin ve benzerlerinin izleyiciye göründüğü boyutla gerçekten ilgilendiğinizi fark ettim.

Başlangıç ​​ölçeğini ayarlamak için HTML başlığına bir meta etiket eklemekten ibaret olduğunu keşfedene kadar aynı sorunu yaşıyordum:

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

JqueryMobile eleman genişliği

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

JqueryMobile Elemanın yüksekliği

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

İyi Şanslar Danny117

GetPPI () işlevini kullanarak ( Mobil web: fiziksel piksel boyutu nasıl elde edilir? ), Bir inçlik kimlik elde etmek için şu formülü kullanın:

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

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

Keşke buna cevap verebilseydim, ancak API oluşturma meraklıları temel gereksinimleri ve bazen soyut şeyleri çok fazla sağlamıyor.

BTW 40 yıllık kullanıcı arayüzü ve yazılım tasarım tasarım deneyimine sahibim ve "VESA" sürücülerinin günlerinden önce sonsuza dek böyle görünen bir şey için tam da buna sahip olmaya çalışıyorum :).

Dokunmatik ekran için "fingerSize ()" olarak adlandırdığım bir şey vardı, bu piksel sayısı 1cm (parmağın ortalama dokunma alanının çapına çok yakın), ancak kök verisi "dpcm".

Bir ekran için istediğiniz diğer şey ise "görüş açısı" dır. Görüntüleme ve dokunma işlevi için görüntüleme cihazının türü hemen hemen izleme mesafesini tanımlar.

    (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'lerimizde sağlamaya çalıştığımız şey budur, ancak çoğu durumda elde etmek ne yazık ki zordur.

Kaba bir boyut tahmini elde edebilirsiniz, ancak bu doğru değildir.

Sonuçların ne olduğunu görmek için birkaç cihazda test ettiğim bir örneği bir araya getirdim. İPhone 6'm yaklaşık% 33 daha büyük değerler veriyor. Mac'imdeki 27 "masaüstü monitörüm 30" monitör olarak bildirildi.

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/