Skip to content
ScreenMetricLab Check screen

Content hub

Screen and Viewport Guides

Use these original guide pages to understand screen resolution, viewport size, DPR, CSS units, responsive breakpoints, aspect ratios, PPI, and QA workflows.

Week 4 cluster

13 guides live

Each guide links back to relevant tools so visitors can learn a concept and immediately test it inside the browser.

3 guides Screen basics 1 guides QA workflow 2 guides CSS units 1 guides Responsive design 3 guides Creator dimensions 1 guides Display basics 1 guides Mobile CSS 1 guides Gaming displays
3 guides Screen basics

Clear explanations of resolution, viewport size, DPR, and how browsers report screen measurements.

Screen basics 5 min read

Screen Resolution vs Viewport Size

Learn why a CSS viewport can be smaller than the physical display resolution and which number matters for responsive design.

Read guide →
Screen basics 5 min read

Device Pixel Ratio Explained

Understand DPR and why high-DPI screens affect CSS pixels, screenshots, and image assets.

Read guide →
Screen basics 7 min read

Screen Resolution Chart

Use this practical screen resolution chart to compare 720p, 1080p, 1440p, 4K, 5K, and 8K display sizes for design, QA, gaming, and content export decisions.

Read guide →
1 guide QA workflow

Practical testing notes for frontend QA, bug reports, viewport screenshots, and responsive review workflows.

QA workflow 6 min read

Responsive Testing Checklist

Use viewport size, DPR, breakpoints, orientation, and preview presets to reproduce responsive layout issues.

Read guide →
2 guides CSS units

Focused support content for this ScreenMetricLab topic.

CSS units 6 min read

100vh vs 100dvh vs 100svh

Understand modern viewport height units and why mobile browser chrome can change visible page height.

Read guide →
CSS units 5 min read

REM vs EM vs PX

Choose scalable CSS units for typography, spacing, fixed details, and reusable components.

Read guide →
1 guide Responsive design

Guides for CSS breakpoints, viewport units, layout testing, and mobile-friendly design decisions.

Responsive design 5 min read

Tailwind and Bootstrap Breakpoints

Compare common framework breakpoints and learn why active breakpoints depend on viewport width, not monitor size.

Read guide →
3 guides Creator dimensions

Image, video, social media, and AI prompt dimension guidance for creators and marketers.

Creator dimensions 5 min read

Aspect Ratio Basics for Creators

Use 16:9, 9:16, 1:1, and 4:5 ratios for videos, stories, banners, thumbnails, and social posts.

Read guide →
Creator dimensions 7 min read

Social Media Image Sizes 2026

Reference common social media image and video dimensions for posts, stories, reels, thumbnails, covers, and ads.

Read guide →
Creator dimensions 6 min read

AI Image Aspect Ratio Guide

Choose practical aspect ratios for AI image prompts, social posts, website heroes, thumbnails, and vertical content.

Read guide →
1 guide Display basics

Reference content for monitor sharpness, screen dimensions, pixel density, and display-size decisions.

Display basics 5 min read

PPI and Display Sharpness

Compare pixel density across phones, laptops, monitors, and TVs and understand what PPI means for sharpness.

Read guide →
1 guide Mobile CSS

Mobile browser layout notes for safe areas, dynamic viewport units, and device-specific UI behavior.

Mobile CSS 6 min read

Safe Area Insets for Mobile Layouts

Learn how CSS safe-area insets protect mobile UI from notches, rounded corners, home indicators, and dynamic browser viewport behavior.

Read guide →
1 guide Gaming displays

Gaming-focused resolution and monitor guidance for sharpness, performance, and screen-size choices.

Gaming displays 8 min read

Best Gaming Resolution Guide

Compare 1080p, 1440p, 4K, ultrawide, and handheld-style resolutions for gaming so you can balance sharpness, FPS, monitor size, and GPU workload.

Read guide →

Internal linking model

Tools and guides work together

Week 4 turns the site from a tool directory into a useful learning hub. Every content page points visitors back to a working calculator or checker.

Screen Resolution vs Viewport Size

Learn why a CSS viewport can be smaller than the physical display resolution and which number matters for responsive design.

Device Pixel Ratio Explained

Understand DPR and why high-DPI screens affect CSS pixels, screenshots, and image assets.

Responsive Testing Checklist

Use viewport size, DPR, breakpoints, orientation, and preview presets to reproduce responsive layout issues.