0

I encountered this issue the 1px border looks 2px on retina display, I know it's something related to devicePixelRatio, but still don't get WHY.

And if 1px looks 2px on retina display with a devicePixelRatio of 2, why the 200px*200px image doesn't look like 400px*400px?

Any my second questions is, if I draw a box with width of 375px on iphone 6(375*667), it only takes half of the screen. Why?

Josh Lee
  • 171,072
  • 38
  • 269
  • 275
Blake
  • 7,367
  • 19
  • 54
  • 80
  • Because the screen viewing distance is different, depending on the use of each device, the number of pixels per inch (PPI) defined as a retina can vary, depending on the display size, with higher pixel density on smaller screens and lower screen sizes. – לבני מלכה Nov 08 '18 at 07:06
  • Also you can read here:https://en.wikipedia.org/wiki/Retina_display – לבני מלכה Nov 08 '18 at 07:07
  • @לבנימלכה sorry, i didn't specify. i meant iphone 8 whose devicepixelratio is 2. – Blake Nov 08 '18 at 07:09
  • can you show your css code? – לבני מלכה Nov 08 '18 at 07:17
  • @לבנימלכה i believe it is a known issue, not related to how the code is written. – Blake Nov 08 '18 at 07:19
  • Per-pixel stuff in web technologies was developed in the 1990s, before high resolution displays were a thing. When 300dpi+ displays become mainstream backwards compatibility had to be kept—you want to be able to see 16x16 icons or 12px fonts in your ultra-expensive gadget! – Álvaro González Nov 08 '18 at 07:22
  • 1
    Possible duplicate of [Physical Pixels vs CSS Pixels vs Device Independent Pixels vs Density Independent Pixels vs PPI](https://stackoverflow.com/questions/41863545/physical-pixels-vs-css-pixels-vs-device-independent-pixels-vs-density-independen) – Álvaro González Nov 08 '18 at 07:23
  • @ÁlvaroGonzález I don't see the link actually cleared the doubts – Blake Nov 08 '18 at 07:53
  • Please check "an element with height: 200px; width: 200px is always 200 by 200 in DIPs or CSS pixels" and "CSS does not use PPI; it only uses DPI." – Álvaro González Nov 08 '18 at 07:56
  • @ÁlvaroGonzález but why 1px looks thicker? If that's due to the fact 1px is mapped to two physical pixel, why 200px*200px don't look larger? – Blake Nov 08 '18 at 08:14
  • 200 CSS pixels are mapped to 400 physical pixels to look the same. Why do you think in should look *larger*? The whole point of Retina displays is to pack more tiny light cells in the same space. – Álvaro González Nov 08 '18 at 08:25
  • @ÁlvaroGonzález then why 1px doesn't look the same? – Blake Nov 08 '18 at 08:28
  • Is there a chance that you edit the question and post a sample snippet (maybe with a smaller picture, let's say 50x50, so it fits the display area) together with a screenshot? There's clearly something I'm not grasping. – Álvaro González Nov 08 '18 at 08:37
  • I see you've added a second question. That depends on zoom level and viewport settings; it's in fact a slightly different subject. I assumed your original question refers to raw HTML at 100% zoom. – Álvaro González Nov 08 '18 at 09:02

0 Answers0