leaverou / dpi Goto Github PK
View Code? Open in Web Editor NEWdpi love - Easily find the DPI/PPI of any screen
Home Page: http://dpi.lv
License: MIT License
dpi love - Easily find the DPI/PPI of any screen
Home Page: http://dpi.lv
License: MIT License
I'm using a Lenovo A3300-HV tablet. It has a resolution of 1024x600 and a dpi of 169 (Verfied by a third-party app CPU-Z). It is a 7" tablet
Your site http://dpi.lv , on visiting from the tablet correctly displays the resolution but incorrectly calculated the diagonal screen size. It should have been 7" but the site displayed 13.3" leading to a wrong dpi (89, instead of 169).
FWIW, I used the latest version of Chrome for Android when visiting your site
Organize by ppi? Or is there reason to the madness?
Please add this piece of hardware.
The screen is always 12.1 inches. The actual panels are either 1024x768 or 1400x1050.
24", 1920x1200, 94 DPI
@LeaVerou Nice Project.
What do you think about this feature ?
Log/Save clients screen resolution and dpi
It can be a great list of devices screen dpi and resolution in future.
Instead of hardcoding the ppi values in the screens.json file, why don't you calculate them on-the-fly using the formula below?
ppi = Math.round( Math.sqrt( Math.pow(w,2) + Math.pow(h,2) ) / d )
Could you please add a license file to the project.
Would be really helpful. Thanks!
VR devices need to know the actual size of a cellphone placed in, say, Google Cardboard or Samsung Gear VR. Current VR libraries are doing some basic sniffing, but not enough to really make a boilerplate for WebVR. The more data on large-format smartphones (e.g. 5" and 6" models) the better!
I am not sure, but this is equal to galaxy nexus s?
I think we should add support for metric units. Either as a switch or as another column in the table.
Why do some screen sizes have larger widths than heights but others don't? For instance, as of d171cb2, Sony Xperia Z5 Premium has a resolution of 3840x2160 in screens.json
, so if you click on that device name on the web app, you get a landscape "preview" of the device screen. But Samsung Galaxy S6, S6 Edge has a saved resolution of 1400x2560, so clicking on that device name gives you a portrait preview.
This is confusing IMHO. Can we/do we have a consensus on which orientation (landscape or portrait) to use? Maybe we could have landscape orientation for tablets but portrait for phones?
{
"name": "Micromax A110",
"w": 480,
"h": 856,
"d": 4.9,
"ppi": 200
}
While it is quite clear to me that "iPhone 4(S)" means "iPhone 4" and "iPhone 4S", it could be confusing to those less tech-savvy, and also doesn't show up when i type "4S", or "iPhone 4S" in the search box.
The same thing applies for the "iPhone 1 & 3G(S)"
Not meant to be nitpicky or to create extra work for you!
I may make a pull request but have to get a few other things done today first!
5.2 inch 565 dpi
My phone iphone5 ios10. In demo shows my phone 98ppi and 13.3". I dont think this is correct values as 13.3" isn't a small value. Thanks for amazing library.
I will be happy to see fix for this
Hi Lea,
Firstly, nice work and thanks for sharing.
I noticed when viewing on a 13 inch MBP plugged into an external 24inch cinema display - moving the browser window between screens and refreshing updates the resolution correctly but not the diagonal - this stays at 13.3 even when viewing on the cinema display..
Hopefully that makes sense - let me know if you'd like any further information.
Andy
The iPhone Plus family uses a fancy hardware scaling to use LCD screens with a PPI that can be mass produced (1080 × 1920) but internally the framebuffer is 1242 × 2208 to better fit legacy Apps.
They use a hardware downscale on chip to end up with the native LCD size. The reason was to stay compatible to native Apps written for older phones and just bump up the retina factor from 1 or 2 to 3.
Alls of this is explained in detail on this website:
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
So I suggest to have two entries in the device list:
Apple iPhone 6/6s/7 Plus framebuffer pixels 1242 x 2208 461 3
Apple iPhone 6/6s/7 Plus native LCD pixels 1080 x 1920 401 2.46
Resolution is 1920 x 1200
dppx is 2
diagonal is 8.3"
273 dpi
user agent: Mozilla/5.0 (Linux; Android 4.4.2; Hudl 2 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.83 Safari/537.36
The Samsung Galaxy S6 has a resolution of 1440x2560 with a display size of 5.1", making for a dpi of approximately 577.
The S6 Edge has the same specifications.
In the FAQ it says:
"DPI is often used for the actual device pixels and Dots Per Pixel (dppx) for the amount of device pixels per CSS pixel (e.g. in Retina displays this will be 2)."
Unfortunately, the term "dppx" is misleading because it implies there are 2 dots displayed for every pixel defined in CSS, when what's really happening is there's a device pixel ratio multiplied on both planes, so on a Retina device 1 pixel defined in CSS is displayed as 4 pixels (2px high and 2px across). A 10x10 pixel box (100 pixels) becomes a 20x20 pixel box (400 pixels) on a Retina device.
It seems like in the table of common devices it would make sense to change the heading from dppx to "Pixel Ratio," or something like that but I'm not sure of a clear, pithy way to update the FAQ to clarify that point.
When the dppx value is not defined in screens.json the value shown on dpi.lv is equal to 1 which is misleading.
Example:
{
"name": "Google Nexus 5",
"w": 1920,
"h": 1080,
"d": 4.95
}
and then the table "Known screens" on dpi.lv shows:
Name | Diagonal | Resolution | DPI | dppx |
---|---|---|---|---|
Google Nexus 5 | 4.95″ | 1920×1080 | 445 | 1 |
When dppx is unknown it should be reflected in the table as for Nexus 5 it is 3, not 1.
How is the diagonal value calculated. Do we need to use hardcoded values for diagonal when passing to CalcDPi function?
With a 24" LED Cinema Display (1920x1200) attached to a closed 17" MPB (1920x1200), the site thinks my diagonal is 13.3in and 170 PPI. This is wrong for both screens, not sure why.
Aside, cool plane-project!
Thanks for a cool resource!
Seems someone else already did alot research for PPI/DPI screens:
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
Do you think it would be easier just to copy/paste all the stats into your JSON format?
What to do about footnotes (eg Samsung Note "Device uses PenTile technology...").
cheers
Please have a look at article below. I guess it is great to add to articles list.
http://sebastien-gabriel.com/designers-guide-to-dpi/home?utm_content=bufferb152c&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer
Both phones feature QHD (2560x1440 pixel) Super AMOLED displays, with the Galaxy S7's 5.1in setup packing in 577ppi, and the larger 5.5in Galaxy S7 edge a slightly lower, but no less impressively sharp 534ppi.
It says it has a dppx of 1 on the live site. Can anyone confirm this for sure? I would think a 9" tablet with resolution that high would be at least a dppx of 2. The iPad's that have the same resolution have dppx of 2.
Please add new device Galaxy S8 and S8+.
Samsung Galaxy S8 - 1440x2960 5.8"
Samsung Galaxy S8+ - 1440x2960 6.2"
The iPad Mini 2 has a resolution of 1536x2048 and a diagonal measurement of 7.9 inches, for a ppi of 324.
1440 x 1440 pixels, 4.5 inches (~453 ppi pixel density)
12" Diagonal
2160x1440
I want to rewrite dpi.lv js with simple angular for faster and more feature
For example we need a sort columns by click on header
Or we need better search, (fuzzy search on every columns)
Or separate device name and manufacture for group all manufacture by sort that column
And so many other idea ...
I'm expert in angular.js and i can do in 2day
Could you please accept pull request ?
It seems unlikely that all of these dppx values would be 1?
Specifically, my own Google Pixel device has a dppx value of 2.63, according to https://mydevice.io/ This data lists the Google Pixel dppx value as 1 though.
Should these values be changed to Unknown or something?
Please add the LG G3 (2560 x 1440 5.3 In) to the list.
Has dppx=1 but should be 2.5 according to a visit to http://bjango.com/articles/min-device-pixel-ratio/
http://www.google.com/nexus/tech-specs.html
4.65"
1280 x 720
shown as 1980px should be 1920px
Reads diagonal as 13.3" & resolution as 2814.9000610113144 x 2814.9000610113144. Graphics cards just reads it as LG Ultrawide.
In Safari (v6.0.5 OS X), the links to the various sizes doesn't change the inputs - the hashChange event fires, but the hash value doesn't match the Regex.
It looks like the hash comes back URL-encoded:
location.hash // => #2880%C3%[email protected]%E2%80%B3
Whereas running decodeURIComponent()
seems to do the right thing:
decodeURIComponent(location.hash) // => #2880×[email protected]″
Hello,
dpi.lv says that my Lumia 1020 has :
Actually, the right value is 4.5″ and 332dpi
We usualy check dpi.lv for check dppx in mobile devices for calculate CSS Resolution
Whats your idea about calculate css resolution by dppx (if available) and show in the list ?
If interested, may i pull request ?
Hey @LeaVerou, thanks for such a useful site and created while travelling? Awesome!
Anyways, when I view the site on Retina MacBook 15" it shows wrong diagonal. Instead of 15.4" it shows 13.3", thought I should let you know 😄
The GS4 numbers are very misleading and against the purpose of the site. Pentile displays of the same dpi are inherently less sharp, by up to 19%. I would adjust the dpi to reflect that and put an asterisk on it.
For those times when people have multiple monitors (like laptop and desktop display monitor), but they all don't have the same DPI.
Would like to have DPI test re-run if it notices a change in screensize changes.
Has such a feature been proposed before?
Would it make a good fit here?
Many phones are now being used inside virtual-reality headsets, where less than half of the screen is dedicated to each eye for a huge field of view - this makes high DPI critical.
New 3D printers now exist which you can use your phone for ( https://www.kickstarter.com/projects/olo3d/olo-the-first-ever-smartphone-3d-printer ) and higher DPi means much smoother 3D print creations.
This would avoid manual addition of devices to known-devices list.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.