PWA向けのCSSメディアクエリー

PWA表示のときだけフッターに固定してメニューボタンなどのUIを設置したいときに。

ありそうやなーと思い調べてみたらあった。便利ー。

@media (display-mode: standalone) {
  /* something */
}

実用例

.for_pwa {
    display: none;
    @media (display-mode: standalone) {
        display: block;
    }
}

.not_pwa {
    display: block;
    @media (display-mode: standalone) {
        display: none;
    }
}

参考

pwa media query

• Web App Manifest Display Modes – What is the Difference? – SuperPWA
• display-mode – CSS: Cascading Style Sheets | MDN
• PWA media queries