PWAで動いてる?isPWA();
Origami
Posted on January 28, 2020
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
}
💖 💪 🙅 🚩
Origami
Posted on January 28, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
undefined Responsive Admin Dashboard Page HTML, CSS And Javascript - CSS Admin Template
November 29, 2024