📚

PWA(safari on iOS)では、resizeイベントが検知できない問題の対処法

2023/07/17に公開

safari on iOSではresizeイベントを検知しないので、

PWA(safari on iOS)では、resizeイベントが検知できない。
なので、isPWA()を作成して、PWAの場合はorientationchangeイベントで制御するようにした。
これが全デバイスで有効かは定かではない。

const isPWA = () =>
    'share' in navigator ||
    window.matchMedia('(display-mode: standalone)').matches

  useEffect(() => {
    setFillHeight()

    if (isPWA()) {
      window.addEventListener('orientationchange', setFillHeight)
    } else {
      window.addEventListener('resize', setFillHeight)
    }

    return () => {
      if (isPWA()) {
        window.removeEventListener('orientationchange', setFillHeight)
      } else {
        window.removeEventListener('resize', setFillHeight)
      }
    }
  }, [])

Discussion