为什么此代码会破坏我在 iPad 上的网站？

Question

这是有问题的代码：

const [isOpen, setOpen] = useState(false);

useEffect(() => {
window
  .matchMedia("(min-width: 768px)")
  .addEventListener("change", () => setOpen(false));
}, []);

一点一点地检查我的代码后，我发现这个代码块完全破坏了我在 iPad 上的网站。该站点不会加载，而是会显示一个白色屏幕。对于上下文，代码应该在屏幕达到指定宽度时关闭导航菜单。可能值得注意的是，这是在 2013 年的 iPad Air 1 上，我认为它不再受支持。该站点在其他 iOS 设备上运行良好，但不适用于此设备。仅仅是软件过时的情况吗？

Answer 1

那是因为您的代码在 addEventListener 处抛出了错误。可能是因为两个原因。

您正试图在 DOM 呈现之前抓取事件。为此，您可以将 'window' 代码包装在 DOMContentLoaded.

中

解决方法：

window.addEventListener('DOMContentLoaded', (event) => {
    window
    .matchMedia("(min-width: 768px)")
    .addEventListener("change", () => setOpen(false));
 }

addEventListener 与您 iPad 上的 safari 版本不兼容。为此，您可以继续编写 try{} catch() 块并使用 addListener 方法。

解决方法：

try {
   window
     .matchMedia("(min-width: 768px)")
     .addEventListener("change", () => setOpen(false));
} catch (err) {
   try {
   window
     .matchMedia("(min-width: 768px)")
     .addListener("change", () => setOpen(false));
   } catch (err1) {
     console.error(err1);
   }
}

有关 matchMedia 和 addEventListener 的更多参考，请查看 MDN Docs

为什么此代码会破坏我在 iPad 上的网站？

Why does this code break my site on iPad?

reactjs

ipad

safari