Today, I had a really embarrassing experience. As usual, I measured the browser width using window.innerWidth and wrote my code so that isMobile = true when it's below 768px. I was thorough with my testing, confirming there were no issues by running it on various devices, including iPhone and Galaxy, across browsers like Safari, Chrome, and Brave.

But…

A friend suddenly told me that my web application looked strange on the Samsung Browser of Galaxy. I thought, "No way?" But when I tested it myself, I found a really strange situation where window.innerWidth < 768 returned false even in mobile mode on the Samsung Browser.

I couldn't understand it. It's strange that it only happens on the Samsung Browser, but I also discovered that when checking mobile view in developer mode on PC Chrome and Firefox, it also returned false.

Various Attempts to Solve the Problem

I immediately tried testing other methods.

1. window.innerWidth

const isMobile = window.innerWidth < 768;

✅ Works normally on regular browsers
❌ Returns false on Samsung Browser and PC Chrome/Firefox developer mode (failed)

2. Added document.documentElement.clientWidth

const isMobile = (window.innerWidth || document.documentElement.clientWidth) < 768;

✅ Logically safer code
❌ Still returns false on Samsung Browser and developer mode (failed)

3. Using window.matchMedia('(max-width: 767px)')

const isMobile = window.matchMedia('(max-width: 767px)').matches;

✅ Works normally on all browsers! (successful 🎉)

After seeing this result, I concluded.
In the future, I need to use window.matchMedia to determine whether a device is mobile.

Why Did This Happen?

To be honest, it's hard to know the exact cause without looking directly at the browser's internal source. But I can make some guesses.

1. Differences in Rendering Method of Samsung Browser
   Samsung Browser is based on Chromium, but it has several custom optimizations. It's possible that, in this process, the value of window.innerWidth behaves differently than it does in regular mobile browsers.

2. Reason for the Issue in PC Chrome & Firefox Developer Mode
   When you activate the "Mobile View" feature in developer mode, the browser not only adjusts the screen size but also changes various internal settings. However, not all environments emulate real mobile devices 100% perfectly. This could be a reason why the window.innerWidth value behaves differently in developer mode than on actual devices.

3. Difference in Whether to Include Scrollbar
   window.innerWidth includes the width of the viewport, while document.documentElement.clientWidth returns the actual content width excluding the scrollbar.
   Could it be that Samsung Browser handles the scrollbar differently internally? But that hypothesis couldn't explain all the phenomena.

In conclusion…

In the future, let's use matchMedia to check for mobile devices

Through this experience, I realized that methods like window.innerWidth are not reliable.
When determining whether a device is mobile, it's safer to use matchMedia as shown below.

const isMobile = window.matchMedia('(max-width: 767px)').matches;

📌 This method
✅ Works normally on all browsers.
✅ Consistent results can be obtained in developer mode.
✅ Works flawlessly even in strange environments like Samsung Browser.

Sometimes, encounters with these unexpected bugs are part of the journey to becoming a better developer. Anyway, today, thanks to the Samsung Browser, I realized the necessity of matchMedia. 😆