Scale Chrome app window depending on display size

2
votes

I have a Chrome app that has a defined window size of 1280x720 (the app loads in remote content that is set to these dimensions)

I am using the following code in my background.js file (name in the manifest):

chrome.app.window.create('index.html', {
  'bounds': {
    'width': 1280,
    'height': 720
  }
});

However, when running the app on a large TV (via a ChromeBox) in kiosk mode, there is space on the right and bottom, due to the app not scaling/zooming.

How can I get my app to fill the full screen, without changing the TV resolution (as this is only available on certain sets)?

I also tried adding "state":"fullscreen" to the background.js script (above) and this worked on my PC in the Chrome browser, but did not work on ChromeOS for whatever reason.

3
javascriptgoogle-chromegoogle-chrome-app
Have you tried setting width/height to min-width and min-height, and then designing your page to be responsive? - Brian
I have not tried the min-dimensions yet. I did try using "state":"fullscreen" which seems to work OK on my PC via Chrome browser, but did not work on ChromeOS - Mr Pablo

3 Answers

2
votes

OK, so I got it working, using a combination of answers, hence posting an answer myself.

To get it working on the ChromeBox and on my PC, I used the following in my backgorund.js file:

chrome.app.window.create('index.html', {
  'innerBounds': {
    'width': 1280,
    'height': 720,
    'minWidth': 1280,
    'minHeight': 720
  },
  'resizable':true,
  'state': 'fullscreen'
});
0
votes

I think this is what you need:

chrome.app.window.create('index.html', {
'bounds': {
'width': 1280,
'height': 720 },
 "resizable": true,
});

Failing that then I think you will need to use setMinimumSize and put your height and width as minWidth & minHeight

0
votes

After creating the window, check the screen bounds and resize it accordingly! Use the window API from the Chrome Platform and maximize based on dimensions.