The way a website appears can vary from one screen to another. This seems obvious when comparing a desktop and a mobile device, but differences can also occur between desktop screens due to screen resolution.
Screen resolution is measured in pixels. Pixels are tiny squares of light that change colour to collectively present the text and images you see on a screen. The total number of pixels a screen can show horizontally and vertically is its screen resolution. For example, a resolution of 1920 x 1080 (Full HD or 1080p) means 1,920 pixels across and 1,080 down. Higher resolutions, such as 5120 x 2880 (5K), display more detail and appear sharper.
Because screens vary in resolution and aspect ratio, the same website can look different across devices. Higher-resolution screens can display more content at once while keeping it sharp, whereas lower-resolution screens may show less content at a larger size. This is why designing a webpage based on a singlet screen size (e.g. as an image in Photoshop layout) can lead to inconsistent results for users.
The relative size of common screen resolutions are visually shown here:
Modern screens typically have more pixels than older screens, and therefore have images that appear sharper than older screens. The way the same website appears at different screen resolutions is illustrated by the examples below (note how the relative size of the white logo and the menu items change between these views).
Although computer screens are normally set to their maximum resolution so they display the sharpest image possible, you can change the resolution through your computer settings if you wish. Some people do this accidentally and then wonder why their screen seems to be 'zoomed in' and display extra large (and therefore less) content on their screen.
NOTE: This article refers to screen resolution, not browser zoom settings. Some people may accidentally change the zoom settings in their internet browser (e.g. Chrome) and then wonder why websites appear bigger and show less content than they expect. For instructions on how to change your browser zoom settings for Chrome please click here.
There are some online tools that can tell you what your screen resolution is. For example, https://whatismyresolution.com/
How to change your screen resolution settings (Windows)
Right-click on any empty area on your computer desktop home screen, then click the menu item Display settings. A pop-up will show your current settings with a drop-down list under the heading Display resolution. If it says (Recommended) next to a resolution, this identifies the native resolution of your screen, which is likely to look the best for you.
To change your screen resolution simply click the down arrow for this drop-down list and select a different resolution. Windows will change your resolution temporarily and you must click Keep changes or it will revert back to the previous resolution automatically after 15 seconds.
How to change your screen resolution settings (Mac)
Click the Apple icon at the top left-hand corner of your screen, then click System Settings. Navigate to the Displays tab on the left hand side. You can change your screen resolution depending on your type of Mac.
NOTE: If your screen resolution isn't shown in the Displays tab, scroll down and click Advanced... then turn on the toggle to Show resolutions as list.