PWA 固定屏幕尺寸

Question

亲爱的社区！

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

谢谢！

Answer 1

您可以收听window'sresize事件并强制调整大小。您实际上可以调整窗口大小，但它会重新设置为您想要的大小。

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

// 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)