JavaScript
ChromeとFirefox、iOS Safari 13以降であれば次の方法が可能です。詳しい利用可能状況はcaniuseで。
https://caniuse.com/#search=display-mode
(window.matchMedia('(display-mode: standalone)').matches
// true: working on PWA
// false: not working on PWA
iOS Safari 12以前ではdisplay-modeを利用できないので、次の方法を利用します。
window.navigator.standalone
// true: working on PWA
// undefined: not working on PWA
CSS
CSSではdisplay-mode media queryを利用すればPWAで動いているかどうかでスタイルを変更できます。
@media all and (display-mode: standalone) {
// styles for PWA
}
Top comments (0)