webentwicklung-frage-antwort-db.com.de

Erkennen des Systems DPI/PPI von JS/CSS?

Ich arbeite an einer Art einzigartiger App, die Bilder mit spezifischen Auflösungen erzeugen muss, je nachdem auf welchem ​​Gerät sie angezeigt werden. Die Ausgabe ist also auf einem normalen Windows-Browser (96ppi), iPhone (163ppi), Android G1 (180ppi) und anderen Geräten unterschiedlich. Ich frage mich, ob es eine Möglichkeit gibt, dies automatisch zu erkennen.

Meine anfänglichen Nachforschungen scheinen nein zu sagen. Der einzige Vorschlag, den ich gesehen habe, ist, ein Element zu erstellen, dessen Breite in CSS mit "1in" angegeben ist, und dann dessen offsetWidth zu überprüfen (siehe auch Wie Sie die DPI-Einstellungen der Bildschirmanzeige über Javascript aufrufen? ). Das macht Sinn, aber das iPhone belügt mich mit dieser Technik und sagt, es sei 96ppi.

Ein anderer Ansatz könnte darin bestehen, die Abmessungen der Anzeige in Zoll zu ermitteln und dann die Breite in Pixel zu teilen, aber ich bin mir nicht sicher, wie das zu tun ist.

45
Josh Santangelo

Es gibt die resolution-CSS-Medienabfrage, mit der Sie CSS-Stile auf bestimmte Auflösungen beschränken können:

wird jedoch nur von Firefox 3.5 und höher, Opera 9 und höher und IE 9 unterstützt. Bei anderen Browsern werden Ihre auflösungsspezifischen Stile nicht angewendet (obwohl ich keine Browser für andere Benutzer als Desktop-Browser geprüft habe).

11
Paul D. Waite

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;
  
  console.log(dpi_x, dpi_y);
</script>

von hier aus http://www.infobyip.com/detectmonitordpi.php . Funktioniert auf mobilen Geräten! (Android 4.2.2 getestet)

10
MaxXx1313

Ich habe einen Weg gefunden, den DOM überhaupt nicht zu benötigen

Das DOM kann unordentlich sein und erfordert, dass Sie Sachen an den Körper anhängen, ohne zu wissen, was mit width: x !important in Ihrem Stylesheet vor sich geht. Sie müssten auch warten, bis das DOM einsatzbereit ist ...

// Binary search, (faster then loop)
// also don't test every possible value, since it tries low, mid, and high
// http://www.geeksforgeeks.org/find-the-point-where-a-function-becomes-negative/
function findFirstPositive(b, a, i, c) {
  c=(d,e)=>e>=d?(a=d+(e-d)/2,0<b(a)&&(a==d||0>=b(a-1))?a:0>=b(a)?c(a+1,e):c(d,a-1)):-1
  for (i = 1; 0 >= b(i);) i *= 2
  return c(i / 2, i)|0
}


var dpi = findFirstPositive(x => matchMedia(`(max-resolution: ${x}dpi)`).matches)

console.log(dpi)

8
Endless

Folgendes funktioniert für mich (hat es jedoch nicht auf Mobiltelefonen getestet):

<body><div id="ppitest" style="width:1in;visible:hidden;padding:0px"></div></body>

Dann füge ich die .js ein: screenPPI = document.getElementById('ppitest').offsetWidth;

Das hat mir 96 gegeben, was dem ppi meines Systems entspricht.

6
john

Ich musste auch dasselbe Bild in der gleichen Größe mit unterschiedlicher Bildschirmauflösung anzeigen, jedoch nur für Windows IE. Ich benutzte:

 <img src = "image.jpg" style = "
 height: Ausdruck (Maßstab (438, 192)); 
 Breite: Ausdruck (Maßstab (270, 192))" />
 
 Funktionsskala (x, dpi) {

 // dpi ist für die ursprünglichen Abmessungen des Bildes 
 Rückgabe von x * screen.deviceXDPI/dpi; 
} 

In diesem Fall beträgt die Breite/Höhe des Originalbilds 270 und 438 und das Bild wurde auf einem 192-dpi-Bildschirm entwickelt. screen.deviceXDPI ist nicht in Chrome definiert und die Skalierungsfunktion muss aktualisiert werden, um andere Browser als IE zu unterstützen

3
Farid Z
function getPPI(){
  // create an empty element
  var div = document.createElement("div");
  // give it an absolute size of one inch
  div.style.width="1in";
  // append it to the body
  var body = document.getElementsByTagName("body")[0];
  body.appendChild(div);
  // read the computed width
 var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
 // remove it again
 body.removeChild(div);
 // and return the value
 return parseFloat(ppi);

}

(Von VodaFone)

2
TJS101

Die Antwort von @Endless ist ziemlich gut, aber überhaupt nicht lesbar. Dies ist ein ähnlicher Ansatz mit festem min/max (es sollten gute sein).

var dpi = (function () {
    for (var i = 56; i < 2000; i++) {
        if (matchMedia("(max-resolution: " + i + "dpi)").matches === true) {
            return i;
        }
    }
    return i;
})();

matchMedia wird jetzt gut unterstützt und sollte ein gutes Ergebnis liefern, siehe http://caniuse.com/#feat=matchmedia

Seien Sie vorsichtig, der Browser gibt Ihnen nicht die exakte Bildschirmauflösung an, sondern nur eine Annäherung 

2
jrmgx

Ich habe gerade diesen Link gefunden: http://dpi.lv/ . Im Grunde ist es ein Webtool, um die Auflösung, das dpi und die Bildschirmgröße des Clientgeräts zu ermitteln.

Ich habe es auf meinem Computer und Handy besucht und es liefert die korrekte Auflösung und DPI für mich. Es gibt ein Github-Repo für Sie, damit Sie sehen können, wie es funktioniert.

1
Adam

DPI ist definitionsgemäß an die physische Größe der Anzeige gebunden. Sie werden also nicht in der Lage sein, die echte DPI zu haben, ohne die Hardware dahinter genau zu kennen.

Moderne Betriebssysteme einigten sich auf einen gemeinsamen Wert, um kompatible Displays zu erhalten: 96 dpi. Das ist eine Schande, aber das ist eine Tatsache.

Sie müssen sich auf das Schnüffeln verlassen, um die tatsächliche Bildschirmgröße für die Berechnung der Auflösung ermitteln zu können (DPI = PixelSize/ScreenSize).

1
Vincent Robert

Ich denke, Ihr bester Ansatz besteht darin, den Vorschlag des "Sniffer" -Bilds mit einer Matrix bekannter DPIs für Geräte zu kombinieren (über Benutzeragenten und andere Methoden). Es ist nicht genau und wird schwierig zu halten, aber ohne mehr über die App zu wissen, die Sie zu machen versuchen, ist dies der beste Vorschlag, den ich anbieten kann.

1
FriendOfFuture

Erstellen Sie eine Liste bekannter DPIs: https://stackoverflow.com/a/6793227

Ermitteln Sie das genaue Gerät. Mit etwas wie:

navigator.userAgent.toLowerCase();

Zum Beispiel beim Erkennen von Mobilgeräten:

window.isMobile=/iphone|iPod|ipad|Android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|Palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase());

Und profit

0
haelmic

Kannst du nicht noch etwas tun? Wenn Sie beispielsweise ein Bild generieren, das von einer Kamera erkannt werden soll (d. H. Sie führen Ihr Programm aus, streichen Sie Ihr Mobiltelefon über eine Kamera, Magie passiert), können Sie dann nicht unabhängig von der Größe etwas verwenden?

Wenn dies eine Anwendung ist, die in kontrollierten Umgebungen bereitgestellt werden soll, können Sie ein Kalibrierungsprogramm bereitstellen? (Sie können etwas einfaches erstellen, z. B. Visitenkarten mit einem kleinen Lineal drucken und während des Kalibrierungsprozesses verwenden).

0
alex