Why Your App Looks Off on Windows

The Problem

I was building an app and everything looked perfect on my Mac. Tested it on my iPhone — flawless. I was happy.

Then someone opened it on Windows. And on a Samsung. And it looked... off. Buttons too big, layouts breaking, things overflowing.

The thing is, I had completely forgotten to check other devices. When you're in the Mac + iPhone bubble, it's easy to assume everything just works everywhere.

Spoiler: it doesn't.

What's Actually Happening

Windows uses display scaling (125%, 150%, etc.) much more aggressively than macOS. When you use fixed px values, Windows scales them in ways that can break your carefully designed layouts.

macOS handles this more gracefully, which is why you might not notice the issue until someone on a different setup reports it.

The Fix

Switch from fixed pixels to relative units:

• rem — relative to root font size, scales consistently
• % — relative to parent element
• vw/vh — relative to viewport width/height

After making this change, my app finally looked unified across Mac, Windows, iPhone, and Samsung. Same proportions, same feel.

Quick Prompt

If you're using an AI coding tool, try this:

Make sure all sizing uses relative units (rem, %, vw/vh) instead of fixed pixels for consistent display across all devices and OS scaling settings.

Common Culprits

These are the places where fixed px causes the most issues:

• Container widths and max-widths
• Padding and margins on main sections
• Font sizes (especially headings)
• Icon sizes
• Gap values in flex/grid layouts

Example

Instead of:

.container {
  max-width: 1200px;
  padding: 40px;
  font-size: 16px;
}

Use:

.container {
  max-width: 75rem;
  padding: 2.5rem;
  font-size: 1rem;
}

Why This Works

Relative units respect the user's system preferences and scaling settings. The browser does the math to make everything proportional, regardless of the device or OS.

Now I always run this prompt early in my projects. Lesson learned.

---

Happy vibecoding ✨