今天我经历了一个非常尴尬的事情。像往常一样，我使用 window.innerWidth 测量浏览器的宽度，当小于768px时设置 isMobile = true 的代码。我进行了彻底的测试。在iPhone、Galaxy等各种设备上，以及在Safari、Chrome和Brave浏览器中，没有发现异常。

但是…

一个朋友突然告诉我，我的网络应用程序在Galaxy的 三星浏览器 中看起来很奇怪。“不会吧？”我心想，但自己测试后发现 确实在三星浏览器中，即使在移动环境下 window.innerWidth < 768 返回的是false，出现了奇怪的情况。

我无法理解。三星浏览器才出现这种情况已经很奇怪了，在PC的Chrome和Firefox浏览器的开发者模式下查看移动屏幕时也发现返回的是false。

Developer testing a website on a smartphone

各种尝试解决问题

我立刻测试了其他方法。

1. window.innerWidth

const isMobile = window.innerWidth < 768;

✅ 在一般浏览器中正常工作
❌ 在三星浏览器和PC Chrome/Firefox开发者模式下返回false（失败）

2. 添加 document.documentElement.clientWidth

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

✅ 从逻辑上更安全的代码
❌ 在三星浏览器和开发者模式下仍然返回false（失败）

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

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

✅ 在所有浏览器中正常工作！（成功 🎉）

看到这个结果后，我得出了结论。
今后判断是否为移动设备时应该使用 window.matchMedia。

为什么会出现这种情况？

坦率地说，如果不直接查看浏览器的内部源代码，很难知道确切的原因。但可以做一些推测。

  1. 三星浏览器的渲染方式的差异
    三星浏览器基于Chromium，但进行了多种定制优化。在此过程中，window.innerWidth 的值可能与普通移动浏览器的表现不同。

  2. 在PC的Chrome和Firefox开发者模式中出现的原因
    启用开发者模式的“查看移动屏幕”功能时，浏览器不仅会调整屏幕大小，还会在内部更改多种设置。但是并不是所有环境都能100%完美地模拟实际的移动设备。在开发者模式下，window.innerWidth 的值出现不同于实际设备的表现可能就是原因。

  3. 滚动条包含与否的差异
    window.innerWidth 包含视口的宽度，但 document.documentElement.clientWidth 返回的是不包含滚动条的实际内容宽度。
    三星浏览器是否在内部以不同方式处理滚动条？但这个假设无法解释所有现象。

总之…

今后检查是否为移动设备时使用 matchMedia

通过这个经历，我意识到像 window.innerWidth 这种方法是不可靠的。
今后判断移动环境时安全地使用如下 matchMedia 是合适的。

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

📌 使用这种方法
✅ 在所有浏览器中正常工作。
✅ 在开发者模式中也能得到一致的结果。
✅ 在三星浏览器这种特殊环境中也能正常运作。

有时候，与这些意想不到的bug相遇也是成为优秀开发者的一个过程。总之，今天由于 三星浏览器让我意识到 matchMedia 的必要性。 😆