Viewport vs Screen Resolution: Key Differences, Sizes & Media Queries for Popular Devices

What is a Viewport?

In web development, the viewport refers to the visible area of a webpage on a device’s screen. It represents the part of the webpage that users can see without scrolling. The viewport size can change based on the device (such as a phone, tablet, or laptop) and how the browser window is sized or zoomed.

The viewport is particularly important for responsive web design, as it helps determine how the page layout should adapt to different screen sizes.

What is Screen Resolution?

Screen resolution is the number of physical pixels a screen can display, measured in width and height (e.g., 1920×1080). It refers to the total pixel dimensions of the device's display, and it's fixed for each device.

Difference Between Viewport and Screen Resolution

• Viewport: Refers to the visible area of a webpage in the browser window and can be adjusted with CSS, zooming, or device orientation. It is often measured in CSS pixels (logical pixels), not physical pixels.
• Screen Resolution: Refers to the total number of physical pixels the device’s display has, which does not change based on browser size or zoom level.

To make webpages responsive, developers often work with the viewport size, which is a more relevant measure in terms of layout.

What is Screen Size of a Device?

The screen size of a device refers to the physical diagonal measurement of the display, typically expressed in inches. It is measured from one corner of the screen to the opposite diagonal corner, not the width or height.

The screen size provides an indication of the overall physical dimensions of the display, but it does not account for screen resolution (number of pixels) or pixel density (PPI). Screen size helps categorize devices (e.g., phones, tablets, laptops), but it doesn't directly influence how content is displayed on the screen.

What is PPI of a Device?

PPI (Pixels Per Inch) refers to the pixel density of a device's display, indicating the number of individual pixels within a one-inch span of the screen. It measures how sharp or detailed the display is, with higher PPI values representing more densely packed pixels, resulting in sharper images and text.

PPI is calculated by dividing the diagonal pixel resolution of the screen by the diagonal physical size of the display in inches. Devices with higher PPI provide clearer and more detailed visual content, while lower PPI may result in less sharpness, especially at close viewing distances.

Popular Devices: Viewport Sizes, Screen Resolutions, Screen Sizes, and CSS PPI

What is CSS Media Query?

A CSS Media Query is a CSS technique used to apply styles conditionally based on the characteristics of the device or browser, such as the viewport width, height, screen resolution, or orientation. Media queries enable responsive design by allowing developers to tailor the appearance of web pages to different screen sizes and devices.

A typical media query checks for conditions like the device's width and applies specific styles if those conditions are met, ensuring that the layout adapts appropriately across phones, tablets, desktops, and other devices.

Example:

@media (max-width: 768px) {
  /* Styles for screens 768px wide or smaller */
}

CSS Media Queries for Popular Devices

To create responsive designs that adjust according to different screen sizes, CSS media queries are used. Here are some common breakpoints used in web design, which you can adjust depending on specific device requirements:

Common Breakpoints for Responsive Design:

/* Extra small devices (phones, 320px and up) */
@media (min-width: 320px) { 
  /* Styles for phones */
}

/* Small devices (phones, 360px and up) */
@media (min-width: 360px) {
  /* Styles for larger phones */
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* Styles for tablets */
}

/* Large devices (laptops/desktops, 1024px and up) */
@media (min-width: 1024px) {
  /* Styles for laptops */
}

/* Extra large devices (large desktops, 1440px and up) */
@media (min-width: 1440px) {
  /* Styles for large desktops */
}

Media Queries for Specific Devices:

1.  iPhone 14 Pro

@media only screen and (max-width: 430px) {
  /* iPhone 14 Pro specific styles */
}

2.  iPhone 14

@media only screen and (max-width: 390px) {
  /* iPhone 14 specific styles */
}

3.  Samsung Galaxy S23

@media only screen and (max-width: 360px) {
  /* Samsung Galaxy S23 specific styles */
}

4.  Google Pixel 7 Pro

@media only screen and (max-width: 412px) {
  /* Google Pixel 7 Pro specific styles */
}

5.  iPad Pro 12.9"

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
  /* iPad Pro specific styles */
}

6.  MacBook Air 13"

@media only screen and (min-width: 1440px) {
  /* MacBook Air styles */
}

7.  iPhone SE (2022)

@media only screen and (max-width: 375px) {
  /* iPhone SE specific styles */
}

8.  iPad Mini (8.3")

@media only screen and (min-width: 768px) and (max-width: 834px) {
  /* iPad Mini specific styles */
}

9.  Samsung Galaxy Tab S8

@media only screen and (min-width: 800px) and (max-width: 1280px) {
  /* Samsung Galaxy Tab S8 specific styles */
}

10.  Google Pixel 6

@media only screen and (max-width: 411px) {
  /* Google Pixel 6 specific styles */
}

11.  Samsung Galaxy Z Fold 5 (Folded)

@media only screen and (max-width: 375px) {
  /* Samsung Galaxy Z Fold 5 (folded) specific styles */
}

12.  Apple Watch 8 (45mm)

@media only screen and (max-width: 396px) {
  /* Apple Watch 8 (45mm) specific styles */
}

13.  Samsung Galaxy Watch 6 (44mm)

@media only screen and (max-width: 450px) {
  /* Samsung Galaxy Watch 6 specific styles */
}

14.  MacBook Air 13" (2022)

@media only screen and (min-width: 1440px) and (max-width: 2560px) {
  /* MacBook Air specific styles */
}

15.  Surface Pro 9

@media only screen and (min-width: 1280px) and (max-width: 1920px) {
  /* Surface Pro 9 specific styles */
}

16.  Dell XPS 13 (2023)

@media only screen and (min-width: 1920px) {
  /* Dell XPS 13 specific styles */
}

17.  Samsung Galaxy A54

@media only screen and (max-width: 412px) {
  /* Samsung Galaxy A54 specific styles */
}

Understanding CSS Pixels and PPI

CSS Pixels: The unit of measure used in web development (for viewport size, media queries, etc.). CSS pixels are not necessarily the same as physical pixels.

PPI (Pixels Per Inch): Measures the pixel density of a device, which is the number of pixels per inch of the screen. Higher PPI means sharper display.

For example, the iPhone 14 Pro has a very high CSS PPI (~460), meaning it can display very sharp images and text. However, it uses scaling to ensure web pages don't appear too small by default.

Conclusion

Understanding the difference between viewport and screen resolution is essential for responsive web design. While the screen resolution refers to the number of physical pixels on a device, the viewport is the area of the webpage that is visible to the user. Web developers focus on viewport sizes to ensure the best layout experience across devices. By using CSS media queries, you can adapt your designs to different screen sizes, ensuring that your website looks great on everything from small phones to large laptops.

Also read Commonly Used CSS Breakpoints for Responsive Design Across Devices