This action requires saving a cookie to remember the page's state. You can read more about that on the cookies page.

 

The app that measures how much you can see of your phone's screen resolution

Released on: 2023-04-17

How much of your phone’s screen resolution can you actually see? I’ve created an Android app called Resolution. It has two goals:

  • collect some statistics to better understand what users of their phones can and can’t see in relation to their screen resolution/density.
  • give you a better understanding of what you can see. So that you can make more informed purchasing decisions.

This is part of the larger series of deep-dives into whether a 4k display on a phone is useful.

Here’s a very brief video summarising the app:

Table of contents

Assumptions

Pixels vs shapes

Due to how the majority of modern phone displays work, an individual pixel is hard to make out, regardless of resolution, and is inconsistent at best. (Here’s a deep dive into what’s being displayed.)

Coming from the other side; think about the use-cases when we need clarity, and what it is that we need. While there might be some obscure use-cases that benefit from what exactly one pixel is doing; in most cases a single pixel is used as part of a team to produce a shape.

Fonts are a prime example of this. Clear communication of the shapes is essential to easy reading. Fuzzy, and jagged edges are counter-productive to that communication. Meanwhile, very few characters only contain vertical or Horizontal lines. The diagonal lines and curves need to be displayed clearly as well.

Diagonals

Diagonals present an interesting problem: While horizontal and vertical steps can be conveyed as one pixel width, diagonals can not.

A diagram showing a 1 pixel width step in both the vertical, and horizontal orientations.
Above: A diagram showing a 1 pixel width step in both the vertical, and horizontal orientations.

These fit naturally within the characteristics of a grid array of pixels.

A diagram showing a diagonal solution for a 1 pixel width step. Effectively 0.7 pixels wide, and perpendicular to the original diagonal line.
Above: A diagram showing a diagonal solution for a 1 pixel width step. Effectively 0.7 pixels wide, and perpendicular to the original diagonal line.

The green pixel shows where the last cyan pixel would have come from if it was still part of the original line, and had not stepped out. By the time you take into account the spacing, it’s movement along that line is 0.5 pixels offset on both the x axis and the y axis. You can see that to step out of the original line, it has had to move by 0.5 pixels on both the x axis and y axis.

The effective movement is 0.7 pixels diagonally away from the original line. (A^2 + B^2 = C^2)

This presents two problems:

  • The edge is not perpendicular to the original diagonal line. Ie it’s not representing the shape that we are setting out to represent. It also makes it harder to see.
  • Most modern displays do not display 1 pixel well. So 1 pixel width is already pushing what the user will be able to see regardless of the resolution. (Deep dive on this is coming.) So to off-set the line by effectively less than 1 pixel is going to make it even harder to see.

A diagram showing 2 diagonal solutions for a 1 pixel width step. Effectively 1.4 pixels wide.
Above: A diagram showing 2 diagonal solutions for a 1 pixel width step. Effectively 1.4 pixels wide.

These two solutions move by 1 whole pixel in both the x axis, and the y axis. Doing the same A^2 + B^2 = C^2 calculation, this gives us a step pixel width of 1.4 pixels.

The left solution is a natural evolution of the previous attempt, where each final pixel is horizontally inline with the same pixel from the original line. This continues the problem of not having a perpendicular step.

The solution on the right fixes this by continuing the outer line by one more pixel. Now the step is perpendicular.

Both of these solutions have the problem that the effective 1.4 pixel width is greater than the 1 pixel width that we are aiming for.

I ended up choosing the solution on the right, because it honestly represents the shape that I’m trying to show. Since it is very slightly easier to see, we therefore need to give more weight to the horizontal and vertical orientations when judging how well we can see the resolution of a display.

How it works

It works by getting you to tap in the corner of a step, and measuring how close you got to the corner, and how long it took you. For each test; the first one has an arrow showing you what to look for:

A screenshot of the first vertical test, with an arrow showing the user what they need to look for.
Above: A screenshot of the first vertical test, with an arrow showing the user what they need to look for.

Each time you succeed, the size of the step is halved and put in a new location of the screen:

A screenshot showing the same vertical test, but at half the previous width, and in a new location. The arrow is no longer present now that the user knows what to look for.
Above: A screenshot showing the same vertical test, but at half the previous width, and in a new location. The arrow is no longer present now that the user knows what to look for.

This continues until it gets down to 1 pixel width:

A screenshot of a 1 pixel width step.
Above: A screenshot of a 1 pixel width step.

1 pixel width will be hard on most devices, regardless of the resolution. I’ve touched on why this is in the video, but am planning on a deeper dive blog post into it. If you’d like to see that, please leave a comment on the video, asking for it.

How the app behaves

Some other notes:

  • Every test/attempt will be put in a different location on the screen. This is to:
    • reduce the influence of any quirks of the display. Eg many pentile displays will display either even columns, or odd columns clearly, and the other columns only light up 1 of the 3 sub-pixels.
    • make it harder for the user to predict where the step is, so if they find it, there’s a high chance that they actually saw it.
  • You get 3 attempts per level.
    • For each failure a new location will be chosen.
      • After 3 failures, that type of test will end, and your last success will be recorded.
    • For each success:
      • Your distance from the step, and time it took you to find it, will be recorded.
      • The number of attempts will be recorded.
  • The full test includes every combination of:
    • Left, right / top, bottom.
    • Vertical, diagonal, horizontal.
  • The quick test only includes:
    • Vertical.
    • Diagonal.
    • Horizontal.

The homescreen

Here’s the homescreen of the app:

A screenshot of the homescreen.
Above: A screenshot of the homescreen.

The current version, as of this writing, has 3 buttons:

  1. “Show test patterns” - The test patterns that I used to test the different types of displays.
  2. “Quick” - 1 Vertical test. 1 Diagonal test. And 1 Horizontal test.
  3. “Full” - All tests.

The test pattern page

The test pattern page looks like this:

A screenshot of the test pattern page.
Above: A screenshot of the test pattern page.

There is an “Increment” button at the bottom page, which increments each of the various on-screen tests.

Text at the top-left of the page

There are currently 4 lines of “iilloo lllll ooooo”.

The increment button moves each of these lines in a different direction by one pixel per increment. This was interesting to observe how the sub-pixel anti-aliasing would change on different display types. The results of this were not as obvious as I had hoped. However they were really helpful for testing observations.

The repeating characters is really interesting. What I was trying to achieve was to offset each repeating character by a different amount so that it would give different sub-pixel anti-aliasing solutions for each character. But that’s not what happened. Almost always, the repeating characters repeated nicely with the same offsets. It was only when other characters were mixed in that these different distortions happened. See the fonts deep-dive for more understanding of that, but here’s a sneak peak:

A screenshot showing the anti-aliasing solutions on a 1080p display.
Above: A screenshot showing the anti-aliasing solutions on a 1080p display.

Look at

  • The “t”s:
    • Notice how some vertical edges are clean. Some are not.
    • None of the horizontal edges are clean.
  • The “i”s:
    • None of the edges are clean.
    • 1 is 3 pixels wide.
    • 1 is 4 pixels wide, but one of the columns is very dark.
    • The other 4 pixel wide “i” has it’s 4th column more moderately lit up.
    • The second “i” looses its dot into the “f”.
  • Letters of the same type are noticeably not consistent with each other. (eg “t” vs “t”, “i” vs “i”)

Test patterns at the center of the page

The test patterns are where the magic really happens. This is where almost all of the insight came from.

A macro photo of a 1080p display with a 'Traditional RGB' layout.
Above: A macro photo of a 1080p display with a ‘Traditional RGB’ layout.

This is a good moment to show the effect of incrementing the patterns:

An animation showing the increment in progress.
Above: An animation showing the increment in progress.

The pattern that I gained the most insight from was the squares of varying sizes, and colours, dancing around each other. It gave really interesting insights into what sub-pixel optimisations each type of display was doing. More on that in another deep-dive soon.

The right-angle patterns that begin in the top-left hand corner were also really interesting. This showed how 1 more pixel, or a block of pixels influences the sub-pixels around the change. It was also really interesting to see how this changed for different colours based on the sub-pixel layout of the display.

Just below the right-angle patterns, and also down the right hand side of the whole area, are the lines at different intervals. The purpose of this was to reveal if a display was doing interpolation on different rows and columns.

At the very bottom, there are some blocks of varying colours beside each other. Each row is a different pixel-width (1, 2, and 3 pixels wide.) The purpose of this was to show how different sub-pixels behaved when different combinations of colours were neighbouring each other. Every time I had a theory about how the display was behaving in this regard; this confirmed it. But I didn’t find it particularly interesting to discuss further.

This post references

Over the last few years, there has been a lot of talk about whether you can make use of the full resolution on a phone with a 4K display. Let's dig in and actually understand this.
Privacy policy for the Resolution Android app.
1970-01-01
I've done a few software projects over the years. Here's a collection of some of them.

This post is referenced by

It was time for a much needed update to the resolution app. Here's what I've improved.

Posts using the same tags

An Android game like 2048, but 3D, and requiring a different strategy.
It was time for a much needed update to the resolution app. Here's what I've improved.
The miss-understanding was so wide-spread that it lead me down quite a rabbit-hole fact checking everything I thought I knew and alternative understandings.
I covered a lot of detail in the resolution project. I was bound to get something wrong. This is where I'll post anything that comes up over time.
Getting the information and access you need to your infrastructure quickly, so that you can get back to sleep.
It's time to blow the dust off machine learning, and apply it to a dataset that I know.
I've just released the biggest, most exciting, update since the first public release of handWavey. The learning curve is dramatically reduced!
The story of where Achel came from, and where it's going.
My CV had gained so much weight that it was hard to do anything with it any more, and it was hard to read. So I did something about it...
Control your computer using a Leap Motion controller, but with an every-day-quality implementation.
Most of the discussions around screen resolution have been something like "I don't want it; therefore you don't want it." Let's dive into that.
When I created my first test pattern for testing the phones, I couldn't see what I expected to see. So I dived into why. What followed was a fascinating journey.
When someone tells you that the maximum that you can perceive is governed by the size and spacing of your cone cells; they are wrong. Let's dive into why.
How much of your phone's screen resolution can you actually see? This app helps you quantify it.
When I set the the font size to my preferences, it looks fuzzy on a 1080p display, but not on a 4k display. Why?
Over the last few years, there has been a lot of talk about whether you can make use of the full resolution on a phone with a 4K display. Let's dig in and actually understand this.
Privacy policy for the Resolution Android app.
An easy way to get a dark theme for kmail content, that reliably works on pretty much everything.
calibrate multiple touch and non touch screens on a single linux system." This is to address the issue on multi-display Linux desktops where the touch panel is automatically calibrated to operate over all of the displays, and even if you get the calibration right, it's then wrong again when you ...
DoneIt is a time tracker for working out where your time is going. For me there were a few things I wanted to achieve with it - Be able to say what I've been doing all day. - See how much time is lost to time ...
Well over a year ago I introduced mass which is a tool for managing large numbers of servers. It's come along way in that time, and it's well and truly time for another look. From the users' point of view, the most interesting things are probably that you can now ...
Achel is a programming language that I have been working on for the past 13 years (I said 12 in the video, it has been a long time!) There has been growing interest in the programs I have been writing using it, so I have now released it as open ...
1970-01-01
I've done a few software projects over the years. Here's a collection of some of them.

More...

Home | About | Contact | Cookies