PWA 固定屏幕尺寸

Question

亲爱的社区！

我正在尝试构建 PWA，重点是在 PC/Mac 上安装后具有固定的屏幕尺寸。我在清单中声明了 "display": "standalone"。它工作正常，但是当在 Mac 或 Windows 上打开时，我可以使用光标调整它的大小。有办法吗？

谢谢！

Answer 1

您可以监听 window 的 resize 事件并强制调整大小。您实际上可以调整 window 的大小，但它会设置回您想要的大小。

此部分检查它是否只发生在已安装的应用程序上，而不是在您的网站上。一个改进是只在 Mac/Win 而不是在移动设备 OS 上进行，但它在移动设备上会像在浏览器中一样被忽略。

// insideInstalledApp.js
export default () =>
  window.matchMedia('(display-mode: standalone)').matches ||
  window.navigator.standalone === true

这只是强制一些特定的尺寸。

// forceScreenSize.js
import insideInstalledApp from './insideInstalledApp'

export default (width, height) => {
  if (insideInstalledApp()) {
    // Size window after open the app
    window.resizeTo(width, height) 

    window.addEventListener('resize', () => {
      window.resizeTo(width, height)
    })
  }
}

在主文件中调用（本例中为 React 应用程序）

// index.js
import forceScreenSize from './forceScreenSize'

// ... other initialization code here
forceScreenSize(270, 480)

Answer 2

这最适合我：

window.addEventListener('resize', function(){
    let fixedWidth = 400;
    let fixedHeight = 400;

    window.resizeTo(fixedWidth, fixedHeight);
});

注意它只适用于已安装的应用程序。

PWA 固定屏幕尺寸

PWA fixed screensize

screen

manifest

progressive-web-apps