Question

亲爱的社区！

我正在尝试构建PWA，关键是一旦在PC / Mac上安装了固定的屏幕大小。我在清单中声明了“ display”：“ standalone”。它可以正常工作，但是在Mac或Windows上打开时，我可以使用光标调整它的大小。有办法吗？

谢谢！

Answer 1

您可以收听window的{{1}}事件并强制调整大小。您实际上可以调整窗口的大小，但是会重新设置为所需的大小。

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

resize

这只是强制某些特定大小。

// 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()) {
    window.addEventListener('resize', () => {
      window.resizeTo(width, height)
    })
  }
}

Answer 2

这对我来说效果最好：

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

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

注意它仅适用于已安装的应用。

PWA固定屏幕尺寸

2 个答案: