PWA固定屏幕尺寸

Question

亲爱的社区！

我正在尝试构建一个PWA，并且重点是在PC / Mac上安装后拥有固定的屏幕大小。 我在清单中声明了"display": "standalone"。它工作正常，但当在Mac或Windows上打开时，我可以用鼠标调整大小。是否有方法解决此问题？

谢谢！

- HappySnappy

---

每个用户都喜欢根据其设备的屏幕大小调整窗口大小以适应自己的偏好。对于每个开发人员来说，挑战在于使其在不同的尺寸下看起来美观且流畅。锁定大小可能会让许多低分辨率笔记本电脑的用户咒骂你的名字。 - Mathias

我正在构建一个带有固定拨号盘大小的电话支持，我需要窗口保持固定。 - HappySnappy

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

- Eric V.

Answer 2

这对我来说效果最佳：

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

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

注意：它只在已安装的应用程序上运行。

- Shameer Kashif