PWA 固定屏幕尺寸答案

【问题标题】：PWA fixed screensizePWA 固定屏幕尺寸
【发布时间】：2018-08-24 09:03:53
【问题描述】：

亲爱的社区！

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

谢谢！

【问题讨论】：

每个用户都喜欢根据自己设备的屏幕尺寸调整窗口大小。每个开发人员面临的挑战是让它看起来不错并适用于不同的大小。锁定尺寸可能会让许多使用低分辨率笔记本电脑的人骂你的名字。
我正在构建具有固定拨号盘大小的电话支持，我需要修复窗口

标签： screen manifest progressive-web-apps

【解决方案1】：

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

此部分检查它是否仅发生在已安装的应用上，而不发生在您的网站上。一个改进是只在 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)

【讨论】：

【解决方案2】：

这对我来说效果最好：

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

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

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

【讨论】：