2

I have a screen-test application that is supposed to show to people how one single hardware pixel looks like on their screen and compare it to a logical pixel.

The idea is to let people experience how screens with different pixel ratios map the hardware pixels to logical pixels.

document.getElementById('devicePixelRatio').innerText = window.devicePixelRatio;
document.getElementById('screen.width').innerText = window.screen.width;
document.getElementById('screen.height').innerText = window.screen.height;
#logical-pixel {  
  width:1px;
  height:1px;
  left:15px;
  top: 15px;
  position: relative;
  background:black;
  overflow:hidden;
}

#hardware-pixel {
  width:1px;
  height:1px;
  left:15px;
  top: 15px;
  position: relative;
  background:black;
  overflow:hidden;
}

@media (-webkit-min-device-pixel-ratio: 2) {
  #hardware-pixel {
    width:0.5px;
    height:0.5px;
  }
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
  #hardware-pixel {
    width:0.6666px;
    height:0.6666px;
  }
}

@media (-webkit-min-device-pixel-ratio: 3) {
  #hardware-pixel {
    width:0.3333px;
    height:0.3333px;
  }
}

.pixel-wrapper {
  border-radius: 50%; 
  border: 1px solid red;
  width: 30px; 
  height: 30px;
}
<meta name="viewport" width="device-width" content="target-densitydpi=device-dpi" />
<div class="pixel-wrapper">
  <div id="logical-pixel"></div>
</div>
<div class="pixel-wrapper">
  <div id="hardware-pixel"></div>
</div>
<dl>
  <dt>devicePixelRatio</dt>
  <dd id="devicePixelRatio">...</dd>
  <dt>screen.width</dt>
  <dd id="screen.width">...</dd>
  <dt>screen.height</dt>
  <dd id="screen.height">...</dd>
</dl>

But as you can see that code has two problems:

  1. It's ugly with all the media queries. They can actually be more ratios: http://bjango.com/articles/min-device-pixel-ratio/
  2. The size of the hardware pixel and logical pixel seem to be the same! If you zoom-in really crazy, the difference will show up but still! Is the browser rounding up those pixel values somehow?! Below is the output of the above code on a screen with pixel ratio of 2.

At 100% zoom the hardware pixel looks the same size as the logical pixel:

enter image description here

At 15% the hardware pixel mysteriously disappears:

enter image description here

And at 200% you can notice the difference between the hardware pixel and the logical pixel:

enter image description here

And here is a 500% zoom for reference:

enter image description here

How can I show something exactly one hardware pixel in such screen without much Javascript code or writing one CSS rule for every possible device pixel ratio or converting my whole page using <meta name="viewport" width="device-width" content="target-densitydpi=device-dpi" /> (ref)?

Community
  • 1
  • 1
AlexStack
  • 16,766
  • 21
  • 72
  • 104
  • You wrote this 7 years ago, but this might be helpful for people stumbling upon this. If you're zooming on a Mac by holding down Control and scrolling (not sure about other computers and methods), I have some bad news for you. Obviously you already know that a hardware pixel and a logical pixel are different, since that's the point of what you're making, but it is actually worse than that. Control + Scroll will sometimes show you something that doesn't match the physical *or* the logical pixel. I wish I remembered exactly why or how but my notes on it from years ago are not readily available. – cesoid Jun 26 '22 at 19:50

0 Answers0