Viewport check
Viewport Checker - This Device Info
Viewport check
Browser Screen Resolution Test (viewport)

This Device Resolution/Viewport Info

Below is the viewport result for your device along with screen resolution data. Website resolution.

Orientation: undefined

Page [px]: 2560 x 530

Available area [px]: 2560 x 1332

Resolution [px]: 2560 x 1440

Dppx : 2, Count : 14

Introduction - Website resolution (viewport)


Welcome to our screen resolution monitoring page! We created this tool with our clients in mind - those who use our technical support or remote consultations to resolve any issues related to displaying content on different devices. This subpage lets you check the current screen resolution of the device you are working on, which is particularly useful when testing the responsiveness of websites.


Modern websites have to function on many types of device – from desktop computers and laptops to tablets and mobile phones. However, differences between screen resolutions, device sizes and scaling settings can lead to different user experiences that are not always easy to predict. Thanks to this subpage we can quickly and precisely confirm the resolution the client is working in, which allows us to identify any differences accurately and adapt the website so that it looks and works as well as possible on every device.


Device size, screen resolution and the resolution reported to the browser
Why is it worth telling them apart?


When it comes to displaying websites, there are several key parameters that affect how content is presented on the user's screen. They are often confused with one another, so it is worth understanding exactly how they differ.


  1. Device Size: This is the actual physical size of the device on which the user is viewing the website. It is usually measured in inches rather than pixels. The height and width of the device determine its portability, but also how much content can be displayed at once. For example, a smartphone with a 6.5-inch screen will have a smaller display area than a 10-inch tablet, even though both may have a similar resolution.
  2. Screen Resolution: This is the number of pixels physically present on the device's screen. Screen resolution is given as the number of pixels vertically and horizontally, for example 1920x1080 px. Differences in resolution can mean that the same website looks different on two devices with different pixel densities. For example, a Full HD image (1920x1080 px) will appear sharper on a smaller screen, where the pixels are packed more tightly, than on a larger screen.
  3. Resolution Reported to the Browser (Viewport): This is the resolution that the web browser interprets as the available working space. You can think of it as the resolution available to the website. In many cases it is not the same as the physical resolution of the screen, because mobile devices often apply scaling to fit content better on a small screen. For example, on a smartphone with a resolution 1080px wide, the browser practically always reports a viewport of around 360 - 420px. This keeps the website readable on a small screen. Put simply, you could say that this is the website resolution. This is where the concept of pixel density comes in - because even though the website is generated as if for a resolution of, say, 400px, the device's resolution, i.e. the underlying 1080px from our example, is used to draw it. Thanks to this, on a phone we see, for instance, sharp and clear fonts. Web designers therefore have to take these differences into account, because positioning the website correctly in relation to the reported viewport is crucial to how it looks on different devices. SmartSpot.Cloud™ has various built-in tools that optimise the operation and appearance of the website at different resolutions (viewports).

Why Do These Differences Matter?


Understanding these three different concepts is crucial in the process of designing responsive websites. Screen resolution tells us about the sharpness and quality of the displayed image. Device size and viewport, on the other hand, determine how much content can fit in a way that is comfortable for the user.

How do you check website resolution?

OK. Let's start with the fact that everyone has their own preferences when it comes to font sizes and what they see on the screen. Seniors judge a website differently from children, and laptop users differently from people working on desktops. The most important thing is that you don't need to worry about it. Your task is not to find the objective truth about what is OK, but to find a solution that works well for you. So focus on the device you use most often and run our software on it.

 

In the green box you will see the viewport resolution of your browser. Now, and this is very important – you can change this resolution by using, on macOS, the keys  Command ⌘++  and  Command ⌘+-  or  Ctrl++  and  Ctrl+-  on Windows computers. Press them and check by looking at the result in the green box at the top. The value changes. All you need to do is open our page and you have the result straight away. Checking is very simple.

How should you understand website resolution?

So how should this be understood? What kind of resolution is it? It is information about how many pixels of screen width and height a website (any website) "sees". So if it sees 1920px, more elements will fit horizontally than when it sees 1500px. When it sees 1280px, there will be even fewer. In short — the smaller the value, the fewer elements fit. 1280px is often taken as the threshold value for computers. If you see a smaller value, it means you will be shown the website in the size intended for tablets or smartphones.

 

It might seem that since you have a computer screen and you are displaying a smartphone version of a website on it, even more should fit — say, 10 smartphone screens on one computer screen. But that is not how it works. When the viewport is small, e.g. 700px, the website "thinks" you are using a smartphone and gives you the smartphone layout, but stretches it across the whole screen. The result is huge fonts and impaired readability (after all, a smartphone screen is usually vertical and a computer screen horizontal). A website has no idea what device you are using; it knows that such and such a resolution has been reported, and that is the version it displays. It may not sound like a problem, but... there are people with visual impairments who, on 13-inch devices for example, have chosen a resolution reported to the website of 1024px (sometimes it is also set that way unknowingly) — which means that a website on their screens most often simply looks bad.

 

1024px is the typical resolution of a tablet held horizontally. Web designers assume that such a tablet needs large elements, because it is operated with a finger, and slightly larger fonts, because it is usually around 10 inches. Do you understand the principle? Note that we are always referring to the REPORTED resolution, i.e. the VIEWPORT. The actual, real resolution of the device does not matter at all. In short — it does not matter what resolution is given in the device's specification. These are two completely different resolutions. Remember that.

How do you match the resolution to a website?

This one is simple. Designers take care of the matching, but you can verify it on various devices.

How do you buy a computer with the right resolution?

So, here we go. Knowing all this, and knowing that today practically every modern device scales its resolution, think about what you need. Open a browser on the device you like and see in our software what resolution it reports. Currently the minimum for a computer is 1280px, but — in our subjective opinion — this is significantly too little. Websites at such resolutions are usually squeezed to the limit. Resolutions closer to 1440px work much better, and in our view this is a sensible minimum. A comfortable standard is 1500–1700px. Why do we give ranges? Isn't there one right value? There isn't! Working comfort also depends on the size of the screen (the physical one!!!) expressed in inches. If we cram 1500px into 13 inches, everything will be significantly smaller than when we put 1500px on 15" - and yes, those two inches make a huge difference in this case. That is why, even though 1500 is more (better?) than 1400, on a 13" screen it is 1400 that will probably be much more comfortable. You have to check it with your own eyes; there is no other way.

 

Remember that in both macOS and Windows you can change the display scaling. So check not only what resolution the page reports, but also whether the font and icon sizes of the whole operating system are comfortable for you. On desktop computers, resolutions of 1920px+ have long been the standard, so there is no problem there. It is different with laptops, where scaling can wreak havoc with the readability of interfaces. Check it. Reading the resolution from the label of computer or mobile equipment is not enough.

We asked Gemini AI for its opinion on this article:

 

The claims made in the text are consistent and technically correct. The main claim, that the viewport is the key parameter for optimising a website, rather than the physical screen resolution, is 100% true.

 

 

Main claims and their correctness

 

  1. Viewport and physical resolution are two different things: This is a fundamental and entirely correct claim. The explanation that the viewport is the space the browser "sees", while the physical resolution is the number of pixels on the screen, is precise. This difference is of great importance for responsive design.

  2. Scaling affects the viewport: This is also true. Operating systems (such as Windows or macOS) allow the interface to be scaled, which in reality changes the size of the viewport the browser reports to the website. This is crucial, because the same monitor can display a website in different viewports depending on the user's settings.

  3. Knowledge of the viewport matters when buying hardware: This claim is very valuable advice. Since it is the viewport that determines how a website looks, buying a high-resolution monitor is not enough. You should check whether its default scaling provides a comfortable viewport for everyday use. The recommendation that the minimum for a computer should be 1440px in width is subjective, but practical.

 

Summary

 

All the claims presented are correct and have a solid technical basis. Their simplified, educational nature does not make them any less true. They help make users aware of an important, though often overlooked, aspect of how websites work.

Hungry for knowledge? Discover 15 myths about websites worth knowing before you buy.

Authors of the text: