forked from LeaVerou/dpi
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
168 lines (140 loc) · 6.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DPI love ♥ Easily find the DPI/PPI of any screen</title>
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<h1>
<img src="assets/img/logo.svg" />
<strong>dpi</strong>love
</h1>
</header>
<fieldset>
Resolution:
<input id="width" inputmode="numeric" pattern="\d+" />
×
<input id="height" inputmode="numeric" pattern="\d+" />
<p id="resolutions">Common:
<a href="#" tabindex="-1">3840×2160</a>
<a href="#" tabindex="-1">2560×1440</a>
<a href="#" tabindex="-1">1920×1080</a>
<a href="#" tabindex="-1">1680×1050</a>
<a href="#" tabindex="-1">1440×900</a>
<a href="#" tabindex="-1">1366×768</a>
<a href="#" tabindex="-1">1280×800</a>
<a href="#" tabindex="-1">1024×768</a>
</p>
</fieldset>
<fieldset>
<select id="dimension" title="Physical dimension (in inches)">
<option selected value="d">Diagonal</option>
<option value="w">Width</option>
<option value="h">Height</option>
</select>:
<input id="physical" value="13.3" inputmode="numeric" pattern="\d*\.?\d+" />″
<p id="diagonals">Common diagonals:
<a href="#" tabindex="-1">7″</a>
<a href="#" tabindex="-1">11.6″</a>
<a href="#" tabindex="-1">13.3″</a>
<a href="#" tabindex="-1">14″</a>
<a href="#" tabindex="-1">15.6″</a>
<a href="#" tabindex="-1">17.3″</a>
<a href="#" tabindex="-1">21″</a>
<a href="#" tabindex="-1">24″</a>
<a href="#" tabindex="-1">27″</a>
</p>
</fieldset>
<output>
<div>
<strong id="result"></strong>
pixels per inch
</div>
</output>
<aside>
<!-- Carbon Zone Code -->
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=dpilv" id="_carbonads_js"></script>
<!-- Carbon Zone Code -->
</aside>
<section id="devices">
<h1>Known screens</h1>
<input type="search" placeholder="Search…" id="search" />
<div id="screens">
<table>
<thead>
<tr>
<th>Name</th>
<th>Diagonal</th>
<th>Resolution</th>
<th>DPI</th>
<th>dppx</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">Loading…</td>
</tr>
</tbody>
</table>
</div>
<footer><p>Help this list expand: <a href="https://github.com/LeaVerou/dpi">Send pull requests or file Github issues</a></p></footer>
</section>
<section id="faq">
<h1>FAQ</h1>
<article>
<h1>“It’s actually PPI, not DPI!”</h1>
<p>There are arguments for both terms. In general PPI is a bit more correct but DPI is more commonplace, hence its usage on this site (also ppi.lv wasn’t available :P).
If you are interested, you can read more on this in the <a href="http://en.wikipedia.org/wiki/Pixel_density">Wikipedia article about Pixel Density</a>.</p>
<p>In more recent terminology, 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).</p>
</article>
<article>
<h1>What does DPI/PPI mean?</h1>
<p>In the context of screens, DPI (Dots Per Inch) or PPI (Pixels Per Inch) refer to the number of device pixels per inch, also called “pixel density”. The higher the number, the smaller the size of the pixels, so graphics
are perceived as more crisp and less pixelated. The concept of DPI is also used in printing, although the dots and their formation is
<a href="https://en.wikipedia.org/wiki/Halftone">different</a> there. In general, good quality printing uses around 300dpi which is higher than most displays.
That’s why vector-based or high-res bitmap graphics usually look more crisp when printed.
</article>
<article>
<h1>What’s the point of this site?</h1>
<p>I got fed up with marketing speak and buzzwords often used to create the impression that a display is much better than it actually is,
so I wanted to help people decide what to get with the actual numbers at hand, through an easy to use web app. Also, it was kinda fun to make. :-)</p>
</article>
<article>
<h1>Higher DPI = Crisper graphics?</h1>
<p>DPI/PPI is a crucial metric for getting an idea of how crisp a display really is, but it’s only one factor among many.
Besides the technical ones (which would need an entire book), there are also those that depend on human nature. </p>
<p>Firstly, viewing distance can affect the perceived pixel size. Therefore, if a cell phone and a large screen have the same pixel density,
the large screen will appear more crisp, as it’s typically viewed from a longer distance. This is why large screens can get away with considerably lower pixel densities.
In the print world, that’s why posters are printed at a much lower dpi than magazines.</p>
<p>Secondly, our eyes cannot discern the difference between pixel densities above a certain threshold.
This threshold seems to vary depending on the source, but here are a few good articles if you’re interested:</p>
<ul>
<li><a href="http://sebastien-gabriel.com/designers-guide-to-dpi/">Designer's Guide to DPI</a></li>
<li><a href="http://wolfcrow.com/blog/notes-by-dr-optoglass-the-resolution-of-the-human-eye/">Notes by Dr. Optoglass: The Resolution of the Human Eye</a></li>
<li><a href="http://clarkvision.com/imagedetail/eye-resolution.html">Notes on the Resolution and Other Details of the Human Eye</a></li>
<li><a href="http://webvision.med.utah.edu/book/part-viii-gabac-receptors/visual-acuity/">Visual Acuity</a></li>
<li><a href="http://blog.cibutin.com/cem-en/?p=40">DPI Myth</a></li>
</ul>
</article>
</section>
<footer>Handmade by <a href="http://lea.verou.me/">Lea Verou</a> with love</footer>
<a href="http://github.com/LeaVerou/dpi"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png" alt="Fork me on GitHub"></a>
<script src="assets/js/prefixfree.min.js"></script>
<script src="assets/js/utopia.js"></script>
<script src="assets/js/dpi.js"></script>
<a href="https://twitter.com/share" data-url="http://dpi.lv" class="twitter-share-button" data-via="LeaVerou" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41634102-1', 'dpi.lv');
ga('send', 'pageview');
</script>
</body>
</html>