phone style timeline

Screen Size Vs Screen Resolution

Have you ever heard of inches, pixels, PPI, width, device-width, points? They all describe at least one aspect of a mobile phone or tablet display. But what do they all mean? Which ones are important when it comes to choosing a device with the intention of watching tons of movies, or streaming TV, or playing games?

The broad answer is probably that 2 or 3 of the above list will be important. Yet we will give you the necessary knowledge to help you understand how things like web pages get displayed on the screen.

Screen size of 3 mobile devices as well as the PPIScreen Size

Every mobile device that has a screen, or electronic device for that matter, has a screen size. On a cell phone, this is measured by taking the measurement diagonally across a screen. From corner to corner, some devices range under 2.5″ while others are closer to 6″.  As you can see, there is a wide range due to the fact that everyone has their own preferred size screen.

This in no way, shape or form indicates the quality of the image that shows up on that screen. It simply tells us the size in which we can see what is written on the screen. This brings us to the concept of screen resolution.

Screen Resolution

Contrary to screen size, screen quality has more depth and details to it. That is why we, at Mr Aberthon, are here: to explain it as clearly as is possible. We will do our best to keep it so simple that even your 90 years old grandmother will easily understand these tech terms.

What is a Pixel?

Contrary to what it looks like, a screen does not show a complete image. In fact, if you were to zoom it in dramatically, you would see its many many tiny dots of color, kind of like a mosaic. Yet since the dots, also know as pixels, are so tiny and there are so many of them, our eyes cannot differentiate them from their neighbors. Hence a clear image that slides seamlessly from one color to the next.

Two red squares indicating the difference between high and low pixel density

There are therefore two factors to take into account regarding screen clarity.

To the left is an example of two squares which are the same size yet different pixel densities. In one image the white spaces in between the pixels are more visible then in the other where there is a higher PPI.

1 – Screen Resolution

If a computer were to have a resolution of 1000×800 pixels, that were to mean that it has 1000 pixels horizontally and 800 vertically. That would bring us to a total of 400 000 pixels on the screen.

Resolution simply tells us how many pixels there are on each display. It does not tell us how close they are to each other which affects the actual clarity of the screen.

2 – Pixels Per Inch or Pixel Density

This number will indicate how many pixels, or dots, can be found on each inch of the screen. It is formed by doing a math equation found lower down in this article. The higher the number, the more seamless the image will be. That is because the spaces between the dots are smaller, so more pixels can be fit into each inch. The images are therefore more precise and our brain does not need to work as hard to see a seamless image.

Now, For an in-Depth Analysis

Inches Matter

If we start with the simplest, and the concept which everyone can easily understand, the inches measurement. As with TVs and desktop monitors, mobile device displays are physically measured diagonally across the actual screen. For example, a Samsung Galaxy Note 4 has a screen size of 5.7”. That is how it is measured from the top left corner of the screen to the bottom right (or top right to bottom left, if you prefer). It’s a straightforward and easy to understand measurement, of course. But we should mention that the difference in overall size of the devices from, say, a 5” display to a 5.7” can be considerable. So don’t assume it’s only a fraction of an inch difference when comparing. Check the physical dimensions of the device, as well as the display.

8 Smartphones comparing screen size, PPI and resolution

Pixel Peeping

Pixels is another measurement that more people are beginning to understand as time goes by. TV broadcasts in High Definition (HD), or media file quality might be described as Full HD, 1080p or 1920 x 1080. You may even see 720p described as HD which, although technically it falls within the HD standard parameters, it isn’t full HD. Usually, it is the pixel width x height that we refer to when we say “resolution”. You’ll see phone resolutions stated at many different pixel sizes from 480 x 320 up to 1920 x 1080 and beyond.

Generally (with conditions as mentioned below), the higher the resolution, the better the quality, and the more detail in the image on screen. If you’ve ever seen the same TV show side by side in both HD and SD (Standard Definition), you’ll see there’s a pretty huge difference between the picture quality of the two.

Pixels Per Inch

PPI is probably the one in our list that should be both better explained and better understood. If you are familiar with printing, scanning or image resolution, you may well have some knowledge about DPI and what it does. PPI is pretty similar. It tells us how many pixels (dots) there are in each on-screen inch of an image.

Imagine a simple image of a blue-to-purple gradient on a display that has just 2 PPI. In effect, the first half inch would be blue, and the second would be purple. As the device has to decide where to make the switch from one color to the other in the pixels available. If, though the display has a resolution of 300 PPI, the device has 300 pixels across. That many pixels would make its transition from blue to purple. The result is a smooth and flawless gradient. Each adjoining pixel being fractionally more purple than blue as it goes from left to right. Until,, finally, gets to the targeted color. In practice, the more PPI, the smoother and cleaner the colors.

Pixels Per Inch - 10 PPI vs 20 PPI Sketch

How to Calculate PPI?

But how do we know the PPI of a display? It’s actually a (relatively) simple formula. Find the diagonal resolution in pixels and divide this by the diagonal size in inches. To find the diagonal resolution, we need to calculate the square root of (w2 + h2). Where w is the horizontal pixels and h the vertical pixels of the display. To use our Galaxy Note 4 example, which has a resolution of 1440 x 2560 pixels, this would be:

Square Root of (14402 x 25602)

This gives us an answer of 2937. If we now divide this by the physical 5.7  inches of the screen size, it gives us an eye-popping PPI of 515. We say “eye-popping” because the human eye sees less of a difference in PPI levels after about 350. The bigger the screen, the bigger the perceived difference. But smaller displays on standard phones rarely need to exceed the 400 PPI mark before further increases stop being effective.

The Rest

Website designers have the added headache of the actual on-page pixels being much fewer than the display resolution. Otherwise, websites would be impossibly small to read on a mobile phone screen. That, though, is a problem for another day.

Points is a curious one. Because Apple were struggling to keep up with the resolutions in phones produced by the likes of Samsung and HTC, they invented a method of squeezing 2 pixels into the space usually reserved for 1. This pretty crude fudge was dubbed Retina, and actually works remarkably well. So well, in fact, that they still use a refined version of the method  to this day.

Display resolution isn’t really a complicated business. Yet it is made so by the lack of a definitive way of stating it. The best we can offer is to advise you to compare the width x height in pixels and PPI of your shortlist. We try and include all the information in our product pages, as long as it’s available, so you can make an informed decision.

Main Menu