Fullscreen with Scaled Viewport


#1

Hi Folks,

Has anybody had any experience scaling the viewport when electron is fullscreen to that UI’s fill the same percentage of the screen, regardless of the screen resolution.

So for example, the default behaviour is, a div element that is 1024x768px will occupy a small part of the screen if a user monitor is 1920 x 1080

But if a user has a small monitor with the same resolution as the div, the div will occupy the whole screen.

What I would like some method to scale the viewport so that the 1024x768 div is always close to occupying the whole screen. (ignoring aspect ratio for now)

I’ve tried messing around with css transforms on document and body and a few other things but have not come up with a good result so far.

Would love to hear if any of you have a good solution that might save me a few hours of experimentation.


#2

You can have your CSS scale with the viewport dimensions.


#3

hrm, that would be a cool solution if I were starting from scratch, but I nightmare to try and shoehorn into an existing project.


#4

Well, in that case there is a lot of information that you haven’t given to us, so nobody here is able to give you what you would consider to be a good answer. You need to provide a thorough description of all the factors involved and/or share the code itself.


#5

Sorry @DamnedScholar, didn’t mean to suggest your answer was not good. I had never heard of the vw, vh units before so I learnt something. It was very usefull, thanks very much. Apologies for being too brief!

I would also love to hear if anybody has had success using css transforms to scale the entire site.

I’d also love to hear from anybody using zoomFactor property on the BrowserWindow, which I have not experimented with yet, and not sure how to measure the size of the screen before a browser window exists.

Do I have to make one, make it full screen, look at the innerWidth, destroy that browserWindow and make a new one using a zoomFactor. Is there a better way?