PWA fixed screensize

Question

dear community!

I'm trying to build a PWA and the point is to have a fixed screen size once installed on PC/Mac. I've declared "display": "standalone" in the manifest. It works correctly, but when opened on Mac or Windows I am able to resize it with the cursor. Is there a way to do it?

Thank you!

Answer 1

You can listen to the window's resize event and force the resize. You can actually resize the window, but it gets set back to your desired size.

This section checks that it only happens on an installed app and not on your website. An improvement would be to only do it on Mac/Win and not in mobile OS, but it gets ignored in mobile just like in the browser.

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

This just forces some specific size.

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

Call in main file (React app in this case)

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

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