在Chrome Android中以全屏模式运行的PWA不支持显示模式:独立 [英] PWA running fullscreen in Chrome Android does not honor Display-mode: standalone

问题描述

在Chrome Android中我的PWA中没有一种用于检测standalone模式的方法

这是我尝试过的CSS方法

@media all and (display-mode: standalone) {
    /* Here goes the CSS rules that will only apply if app is running standalone */
}

这是Javascript方法(第171-175行，297-306行)

function isRunningStandalone() {
    return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
    /* This code will be executed if app is running standalone */
}

它们都不起作用:即使该示例可行，在Chrome Android中远程测试isRunningStandalone()也会返回false.

(@ josemmo在此处制作的示例)

我已经在iOS和3种不同的Android手机中测试了该代码. iOS完美运行.

解决方案

我找到了解决问题的方法:manifest.json必须具有"display": "standalone"

"display": "fullscreen"将不起作用.我也无法测试.

Neither one of the methods used to detect standalone mode in Chrome Android work in my PWA

This is the CSS method I tried

@media all and (display-mode: standalone) {
    /* Here goes the CSS rules that will only apply if app is running standalone */
}

And this is the Javascript method (line 171-175, 297-306)

function isRunningStandalone() {
    return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
    /* This code will be executed if app is running standalone */
}

Neither one of them worked: Testing isRunningStandalone() remotely in Chrome Android returns false, even though the example works.

(example made by @josemmo here)

I have tested the code in iOS and 3 different Android Phones. iOS works perfectly.

解决方案

I found the solution to the problem: manifest.json has to have "display": "standalone"

"display": "fullscreen" will not work. I could not test for it either.

这篇关于在Chrome Android中以全屏模式运行的PWA不支持显示模式:独立的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！