Browser screen/height with page zoom

Question

I am looking into a way of getting the innerHeight and width of a browser (specifically chrome) so that the sizes stay consistent (as happens with outerHeight/width) when you are zoomed in or out on the page.

To be more specific. I am trying to set the height/width of a child window based on the current height and width of the parent window, and I am currently using inner height/width.

However, when if for example, you have a 1000px browser window, and them zoom to 50%. If you then get the inner width. It will report that as '2000px' When the child window is opened, it sets the width to 2000px. Then it sets the zoom on the child window based on the zoom of the parent window. This gets set to 50%, which then updates the size of the window, so you end with a width of 4000px at 50% zoom.

So I am mostly looking for a way of getting the inner dimensions either through the current zoom level and innerWidth, or using the outerWidth/Height, and trying to get the height/weight of space between the values. Neither of which I can see a way to get.

See code example on

https://jsfiddle.net/p05begnq/

using

function openWindow() {
var width = window.innerWidth;
var height = window.innerHeight;
window.open("https://www.google.com", "_blank", "width=" + width + ",height=" + height);

}

Click the 'Link' and google will open in a window the size of the output window. Zoom out, click it again. The child window will now be bigger

Answer 1

Ended up using

width: window.outerWidth, height: window.outerWidth/window.innerWidth * window.innerHeight,

as window.outerWidth/window.innerWidth gives a good approximation of the ratio, as inner and outer width are normally the same when at a standard zoom level