HippoBlog
Web開発に関する備忘録や
日々の雑記ブログ
  • #CSS
  • 2019年7月11日
ENTRY TITLE

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

TEXT BY @hippohack@hippohack
TEXT BY @hippohack@hippohack
  • #CSS
  • 2019年7月11日
  • このエントリーをはてなブックマークに追加

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


最後までお読みいただき、ありがとうございました。

もし、この記事が役に立ちましたら、ぜひ「いいね!」 をよろしくお願いいたします。

ご意見などありましたら@hippohackへお願いいたします。

  • このエントリーをはてなブックマークに追加