I Built a Free Screen Resolution Checker — Here's What I Learned

#webdev #javascript #productivity #beginners

I kept googling "what is my screen resolution" and landing on the same ad-heavy sites with tiny tools buried under popups and cookie banners. So I built my own.

What it does

My Screen Resolution instantly detects:

Screen resolution (e.g. 1920×1080)
Viewport size (the actual browser window)
Device pixel ratio (1x, 2x, 3x for Retina)
Color depth (24-bit, 30-bit, etc.)

No install, no ads, works in any browser.

The tech stack

Next.js 15 with App Router
Tailwind CSS 4
Framer Motion for animations
Server-rendered SEO content with client-side detection island
Static generation for 130+ pages

The detection is simple

The core logic is just a few lines:

const info = {
  screenWidth: window.screen.width,
  screenHeight: window.screen.height,
  viewportWidth: window.innerWidth,
  viewportHeight: window.innerHeight,
  dpr: window.devicePixelRatio,
  colorDepth: window.screen.colorDepth,
};

The tricky part is making it update live — when users resize the browser, connect an external monitor, or change their display scaling. I listen to both resize events and matchMedia changes for the pixel ratio.

What I added beyond the tool

A bare tool page doesn't rank on Google. So I built out:

Resolution guides — dedicated pages for 20+ resolutions (1080p, 1440p, 4K, 5K, 8K) with specs, compatible devices, FAQs, and JSON-LD structured data
Comparison pages — 1080p vs 1440p, 1080p vs 4K, etc.
100 blog articles — covering everything from "best resolution for coding" to "why does my screen look blurry"

Lessons learned

Google doesn't index new sites fast. I had 125 pages in my sitemap and Google only indexed 17 after a month. Backlinks matter more than content volume for new domains.
Server rendering matters for SEO. My homepage was originally a "use client" component — Google saw an empty shell. Splitting it into a server component with a client island fixed it.
CTR is everything. I was getting 21,000 impressions but only 33 clicks (0.16% CTR). Rewriting title tags and meta descriptions is the highest-ROI SEO task.
Mobile navigation is not optional. My nav was hidden sm:flex with no hamburger menu. 14% of my traffic is mobile and they literally couldn't navigate the site.

Check it out

my-screen-resolution.com — the tool
URL Slug Generator — another free tool I built

If you're building micro SaaS tools, I'd love to hear what you've learned about getting them indexed and ranked. Drop a comment!

DEV Community