Skip to content

Instantly share code, notes, and snippets.

@sttk

sttk/windowSize.html

Last active May 10, 2023 21:27
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save sttk/0b63129d35a3578ce7e61cd8a00b3ea7 to your computer and use it in GitHub Desktop.
Save sttk/0b63129d35a3578ce7e61cd8a00b3ea7 to your computer and use it in GitHub Desktop.
Download ZIP
Window size
Raw
windowSize.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Window Size</title>
<style>
html { font-size: 12px; }
div.fixed { position: fixed; left: calc(100% - 100px); top: 20px; }
div.fixed > a { font-size: 14px; }
</style>
<script>
var winProps = [
'innerWidth', 'innerHeight',
'outerWidth', 'outerHeight',
'screenX', 'screenY',
'screenLeft', 'screenTop',
'pageXOffset', 'pageYOffset',
'scrollX', 'scrollY',
'scrollLeft', 'scrollTop',
'screen', 'devicePixelRatio',
];
function openSubWindow() {
//var features = 'width=1,height=1,top=150,left=100';
//var features = 'width=0,height=0,top=150,left=100';
//var features = 'width=400,height=200,left=100,top=100';
//features += ',resizable=1';
//var features = '';
//var features = ',';
var features = 'resizable=yes';
//var features = 'menubar=yes';
//var features = 'left=30';
//var features = 'left=30,top=50';
//var features = 'width=400';
//var features = 'width=400,height=200';
var win = window.open(location.href, '_blank', features);
//var win = window.open(location.href, '_self', features);
//win.moveTo(10, 30);
//win.resizeTo(1, 1);
//win.resizeBy(-400, -200);
/*
setTimeout(function() {
//win.moveTo(10, 30);
//win.resizeTo(1, 1);
//win.resizeBy(-401, -201);
}, 1000);
*/
console.log(window.matchMedia())
}
window.addEventListener('load', function() {
//window.moveTo(10, 20);
//window.resizeTo(0, 0);
//window.resizeBy(-400, -200);
//window.resizeBy(-20, -10);
});
</script>
</head>
<body>
<article>
<h2>window Object</h2>
<script>
winProps.forEach(function(prop) {
document.writeln('<div>window.' + prop + ' = <span id="id-window-' +
prop + '"></span></div>');
});
function showWinProps() {
winProps.forEach(function(prop) {
var elm = document.getElementById('id-window-' + prop);
if (!elm) {
return;
}
if (!isObject(window[prop])) {
elm.innerText = window[prop];
return;
}
elm.innerHTML = '{<br/>' + showSubProps(window[prop]) + '<br/>}';
});
}
function showSubProps(obj, indent) {
indent = '&#160; &#160; ' + (indent || '');
if (!obj) {
return String(obj);
}
var arr = [];
for (var key in obj) {
var sub = obj[key];
if (isObject(sub)) {
arr.push(key + ' = {<br/>' + showSubProps(sub, indent) + '<br/>' +
indent + '}');
} else {
arr.push(key + ' = ' + String(sub));
}
}
return indent + arr.join(',<br/>' + indent);
}
function isObject(obj) {
return (obj && typeof obj === 'object');
}
showWinProps();
window.addEventListener('load', showWinProps);
window.addEventListener('resize', showWinProps);
window.addEventListener('scroll', showWinProps);
document.write('<div class="fixed"><a href="javascript:openSubWindow()">' +
'[open window]</a></div>');
</script>
</article>
</body>
</html>
Raw
windowSize.md

Window size

Window properties related to window size

  1. outerWidth
  2. outerHeight
  3. innerWidth
  4. innerHeight

Parameters related to window size

  1. Edge sizes
  2. Minimum/Maximum window size
  3. Open as a frame window
  4. Window shift size when opening

outerWidth

outerWidth is the whole width of the window, including the window edges. This value can be calculated with innerWidth and the window edge sizes. The values of <edge-size-left> and <edge-size-right> are the browser specific values. The outerWidth is limited by the browser specific minimum window width (<min-window-wigth>).

outerWidth = innerWidth + <edge-size-left> + <edge-size-right>
outerWidth = Math.max(outerWidth, <min-window-width>)

This value can be configured by width parameter in the 3rd argument of window.open function. This width may be reflected to innerWidth or outerWidth according with each browser's manner. Generally, browsers set the value of this width parameter to innerWidth. The outerWidth is limited by the browser specific minimum window width (<min-open-width>).

// window.open(url, '_blank', 'width=400,height=200')
innerWidth = width
outerWidth = innerWidth + <edge-size-left> + <edge-size-right>
outerWidth = Math.max(outerWidth, <min-open-width>)

NOTE: Browsers opened as a frame window don't apply the size by window.open. (<open-as-frame-window>.)

The value can be configured by the 1st argument of window.resizeTo function. This argument may be reflected to outerWidth or innerWidth according with each browser's manner. Generally, browsers set to outerWidth with this function. And the outerWidth is limited by the browser specific minimum window width (min-resize-width).

// window.resizeTo(resizedWidth, resizedHeight)
outerWidth = resizedWidth
outerWidth = Math.max(outerWidth, <min-resize-width>)

NOTE: Browsers opened as a frame window don't apply the size by window.resizeTo. (<open-as-frame-window>.)

Moveover, this value can be configured by the 1st argument of window.resizeBy function. Since this function increase or decreases the window size by the argument value, outerWidth can be calculated as follows: And the outerWidth is limited by the browser specific minimum window width (min-resize-width).

// window.resizeBy(increasedWidth, increasedHeight)
outerWidth += increasedWidth
outerWidth = Math.max(outerWidth, <min-resize-width>)

NOTE: Browsers opened as a frame window don't apply the size by window.resizeBy. (<open-as-frame-window>.)

Chrome (on macOS, Win10, Linux)
The width parameter is set to innerWidth normally. But when executing window.moveTo function immediately after window.open from outside of the window, the width parameter is reflected to outerWidth. And for a while after window.open, the width parameter is reflected to innerWidth.
Firefox (on macOS, Win10, Linux)
The width parameter is always set to innerWidth.
Vivaldi (on macOS, Win10, Linux)
  • Vivaldi doesn't allow window popups in default setting.
  • Vivaldi's outerWidth sometimes gets different from innerWidth and takes wrong value by resizing though all window edge sizes is zero.
Safari (on macOS)
The width parameter is always set to outerWidth.
IE11 (on Win10)
The width parameter + 2 pixel is always set to innerWidth.
Edge (on Win10)
The width parameter is always set to innerWidth. (windiw.moveTo called from outside of the window is seemed not to be applied.)
  • outerWidth takes wrong values immediately after window.open and gets them correct after reloading, scrolling, or other operations.

outerHeight

...Like outerWidth.

innerWidth

innerWidth is the viewport width of the window. This value includes the vertical scrollbar width.

This value can be calculated with outerWidth and window edge sizes as follows:

innerWidth = outerWidth - <edge-size-left> - <edge-size-right>

The values of <edge-size-left> and <edge-size-right> are the browser specific values.

innerHeight

...Like innerWidth.

Edge sizes

  • <edge-size-left>
  • <edge-size-right>
  • <edge-size-top>
  • <edge-size-bottom>

Chrome

Frame window macOS Win10 Linux
<edge-size-left> 0 8 5
<edge-size-right> 0 8 5
<edge-size-top> 74 85 81
<edge-size-bottom> 0 8 5
Popup window macOS Win10 Linux
<edge-size-left> 0 8 0
<edge-size-right> 0 8 0
<edge-size-top> 51 59 28
<edge-size-bottom> 0 8 0

Firefox

Frame window macOS Win10 Linux
<edge-size-left> 0 6 0
<edge-size-right> 0 6 0
<edge-size-top> 79 85 71
<edge-size-bottom> 0 6 0
Popup window macOS Win10 Linux
<edge-size-left> 0 8 0
<edge-size-right> 0 8 0
<edge-size-top> 54 60 29
<edge-size-bottom> 0 8 0

Vivaldi

Frame window macOS Win10 Linux
<edge-size-left> 0 0 0
<edge-size-right> 0 0 0
<edge-size-top> 0 0 0
<edge-size-bottom> 0 0 0
  • Vivaldi doesn't allow window popups in default setting.

Safari

Frame window macOS
<edge-size-left> 0
<edge-size-right> 0
<edge-size-top> 61
<edge-size-bottom> 0
Popup window macOS
<edge-size-left> 0
<edge-size-right> 0
<edge-size-top> 45
<edge-size-bottom> 0

IE11

Frame window Win10
<edge-size-left> 8
<edge-size-right> 8
<edge-size-top> 55
<edge-size-bottom> 8
Popup window Win10
<edge-size-left> 8
<edge-size-right> 8
<edge-size-top> 31
<edge-size-bottom> 8

Edge

Frame window Win10
<edge-size-left> 8
<edge-size-right> 8
<edge-size-top> 76
<edge-size-bottom> 8
Popup window Win10
<edge-size-left> 8
<edge-size-right> 8
<edge-size-top> 76
<edge-size-bottom> 8

Minimum/Maximum window size

  • <min-window-width>
  • <min-window-height>
  • <min-open-width>
  • <min-open-height>
  • <min-resize-width>
  • <min-resize-height>
  • <max-window-width>
  • <max-window-height>

Chrome

Frame window macOS Win10 Linux
<min-window-width> 400 286 367
<min-window-height> 272 93 135
  • On Win10, when window size is minimum and the resizing is too fast, innerWidth/innerHeight take wrong values. (This is seemed to cause since viewport height is zero).
Popup window macOS Win10 Linux
<min-window-width> 100 136 118
<min-window-height> 122 67 86
<min-open-width> 151 136 118
<min-open-height> 100 167 128
<min-resize-width> 100 136 118
<min-resize-height> 122 100 100
  • window.open opens the popup windows and sets outerWidth/outerHeight to same size with innerWidth/innerHeight of the parent window.
  • When doing window.moveTo immediately after window.open, chrome makes the outerWidth/outerHeight to <min-window-width> and <min-window-height>.
  • On Win10, when window size is minimum and the resizing is too fast, innerWidth and innerHeight take wrong values. (This is seemed to cause since viewport height is zero).
  • On Win10, window.resizeTo(1, 1) resizes the window size to 136/100 pixels. But window.resizeTo(0, 0) resizes the window size to 136/67 pixels.
  • On Linux, window.resizeTo(0, 0) or window.resizeBy(-innerWidth, -innerHeight) makes window resize to (outerWIdth, outerHeight) = (118, 86) / (innerWidth, innerHeight) = (0, 0).

Firefox

Frame window macOS Win10 Linux
<min-window-width> 335 316 300
<min-window-height> 104 149 96
Popup window macOS Win10 Linux
<min-window-width> 73 136 25
<min-window-height> 82 93 54
<min-open-width> 154 136 100
<min-open-height> 100 168 129
<min-resize-width> 100 136 100
<min-resize-height> 100 100 100
  • window.open opens popup windows to same outerWidth/outerHeight with the parent window when both width and height parameters are zero.

Vivaldi

Frame window macOS Win10 Linux
<min-window-width> 400 366 366
<min-window-height> 169 170 164
  • Vivaldi doesn't allow window popups in default setting.
  • Vivaldi's outerWidth sometimes gets different from innerWidth and takes wrong value by resizing though all window edge sizes is zero.

Safari

Frame window macOS
<min-window-width> 504
<min-window-height> 255
<min-resize-width> 100
<min-resize-height> 100
  • Safari can resize frame windows with window.resizeTo and window.resizeBy.
Popup window macOS
<min-window-width> 100
<min-window-height> 100
<min-open-width> 100
<min-open-height> 100
<min-resize-width> 100
<min-resize-height> 100
  • window.open opens popup windows to same outerWidth/outerHeight with the parent window when both width and height parameters are zero.

IE11

Frame window Win10
<min-window-width> 250
<min-window-height> 100
<min-resize-width> 250
<min-resize-height> 100
  • IE11 can resize frame windows with window.resizeTo and window.resizeBy.
Popup window Win10
<min-window-width> 250
<min-window-height> 100
<min-open-width> 270
<min-open-height> 143
<min-resize-width> 250
<min-resize-height> 100
  • window.open opens popup windows to same outerWidth/outerHeight with the parent window when both width and height prameters are zero.

Edge

Frame window Win10
<min-window-width> 336
<min-window-height> 168
Popup window Win10
<min-window-width> 336
<min-window-height> 200
<min-open-width> 336
<min-open-height> 200
<min-resize-width> ---
<min-resize-height> ---
  • window.open opens popup windows to screen size (window.availWidth/(window.availHeight - 32) when both width and height parameters are zero.
  • Edge has bugs that moveTo, resizeTo and resizeBy don't behave rightly.

Open as a frame window

  • <open-as-frame-window>

On some (almost) browsers, windows opened as frame windows don't resize with window.open, window.moveTo, window.moveBy, window.resizeTo and window.resizeBy, because of the tab feature.

Browser Resizable frame
Chrome (on macOS, Win10, Linux)
Firefox (on macOS, Win10, Linux)
Vivaldi (on macOS, Win10, Linux)
Safari (on macOS) ✓
IE11 (on Win10) ✓
Edge (on Win10)

Relation to features of window.open

Whether a window is opened as a frame window or not is related to features which is the 3rd argument of window.open.

The position and size of a window are always coordinated to contain inside screen.

Chrome

features = ''
A window is opened as a frame window (a tab window). The position and size of the new window are same with the parent window.
features = ','
A window is opened as a popup window.
  • new.innerWidth = parent.outerWidth
  • new.innerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>
features = 'resizable=yes' (no effect, always yes)
A window is opened as a popup window.
  • new.innerWidth = parent.outerWidth
  • new.innerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>
features = 'menubar=yes' (no effect, always no)
A window is opened as a popup window.
  • new.innerWidth = parent.outerWidth
  • new.innerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>
features = 'left=30' (no effect)
A window is opened as a popup window.
  • new.innerWidth = parent.outerWidth
  • new.innerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>
features = 'left=30,top=50' (no effect)
A window is opened as a popup window.
  • new.innerWidth = parent.outerWidth
  • new.innerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>
features = 'width=400' (no effect)
A window is opened as a popup window.
  • new.innerWidth = parent.outerWidth
  • new.innerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>
features = 'width=400,height=200'
A window is opened as a popup window.
  • new.innerWidth = 400
  • new.innerHeight = 200
  • new.screenX = 0
  • new.screenY = 0

Firefox

features = ''
A window is opened as a frame window (a tab window). The position and size of the new window are same with the parent window.
features = ','
A window is opened as a popup window.
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x> (always 65 on Linux)
  • new.screenY = parent.screenY + <window-shift-y> (always 24 on Linux)
features = 'resizable=yes' (no effect, always yes)
A window is opened as a popup window.
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x> (always 65 on Linux)
  • new.screenY = parent.screenY + <window-shift-y> (always 24 on Linux)
features = 'menubar=yes' (no effect, always no)
A window is opened as a popup window.
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x> (always 65 on Linux)
  • new.screenY = parent.screenY + <window-shift-y> (always 24 on Linux)
features = 'left=80'
A window is opened as a popup window.
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = 80
  • new.screenY = parent.screenY + <window-shift-y> (always 24 on Linux)
features = 'left=80,top=50'
A window is opened as a popup window.
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = 80
  • new.screenY = 50
features = 'width=400'
A window is opened as a popup window.
  • new.innerWidth = 400
  • new.outerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x> (always 65 on Linux)
  • new.screenY = parent.screenY + <window-shift-y> (always 24 on Linux)
features = 'width=400,height=200'
A window is opened as a popup window.
  • new.innerWidth = 400
  • new.innerHeight = 200
  • new.screenX = parent.screenX + <window-shift-x> (always 65 on Linux)
  • new.screenY = parent.screenY + <window-shift-y> (always 24 on Linux)

Vivaldi

Vivaldi always opens a window as a frame window (a tab window) regardless of features.

Safari

features = ''
A window is opened as a frame window (a tab window). The position and size of the new window are same with the parent window.
features = ','
A window is opened as a frame window (another window).
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>
features = 'resizable=yes' (no effect, always yes)
A window is opened as a frame window.
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>
features = 'menubar=yes' (no effect, always no)
A window is opened as a frame window.
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>
features = 'left=30'
A window is opened as a frame window.
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = 30
  • new.screenY = parent.screenY + <window-shift-y>
features = 'left=30,top=50'
A window is opened as a frame window.
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = 30
  • new.screenY = 50
features = 'width=400'
A window is opened as a popup window.
  • new.outerWidth = 400
  • new.outerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>
features = 'width=400,height=200'
A window is opened as a popup window.
  • new.outerWidth = 400
  • new.outerHeight = 200
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>

IE11

features = ''
A window is opened as a frame window (a tab window). The position and size of the new window are same with the parent window.
features = ','
A window is opened as a frame window.
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>
features = 'resizable=yes'
A window is opened as a popup window.
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>
features = 'menubar=yes' (no effect, always no)
A window is opened as a popup window.
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>
features = 'left=30'
A window is opened as a popup window.
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = 30
  • new.screenY = parent.screenY + <window-shift-y>
features = 'left=30,top=50'
A window is opened as a popup window.
  • new.outerWidth = parent.outerWidth
  • new.outerHeight = parent.outerHeight
  • new.screenX = 30
  • new.screenY = 50
features = 'width=400'
A window is opened as a popup window.
  • new.innerWidth = 400 + 4
  • new.outerHeight = parent.outerHeight
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>
features = 'width=400,height=200'
A window is opened as a popup window.
  • new.innerWidth = 400 + 4
  • new.innerHeight = 200 + 4
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>

Edge

features = ''
A window is opened as a frame window (a tab window). The position and size of the new window are same with the parent window.
features = ','
A window is opened as a popup window, and maximized
  • new.outerWidth = 816
  • new.outerHeight = 640
  • new.screenX = (previous window's left) + 40
  • new.screenY = 0 or 32
features = 'resizable=yes' (no effect, always yes)
A window is opened as a popup window, and maximized.
  • new.outerWidth = 816
  • new.outerHeight = 640
  • new.screenX = (previous window's left) + 40
  • new.screenY = 0 or 32
features = 'menubar=yes' (no effect, always no)
A window is opened as a popup window, and maximized.
  • new.outerWidth = 816
  • new.outerHeight = 640
  • new.screenX = (previous window's left) + 40
  • new.screenY = 0 or 32
features = 'left=30' (no effect)
A window is opened as a popup window, and maximized.
  • new.outerWidth = 816
  • new.outerHeight = 640
  • new.screenX = (previous window's left) + 40
  • new.screenY = 0 or 32
features = 'left=30,top=50' (no effect)
A window is opened as a popup window, and maximized.
  • new.outerWidth = 816
  • new.outerHeight = 640
  • new.screenX = (previous window's left) + 40
  • new.screenY = 0 or 32
features = 'width=400' (no effect)
A window is opened as a popup window, and maximized.
  • new.outerWidth = 816
  • new.outerHeight = 640
  • new.screenX = (previous window's left) + 40
  • new.screenY = 0 or 32
features = 'width=400,height=200'
A window is opened as a popup window.
  • new.innerWidth = 400
  • new.innerHeight = 200
  • new.screenX = parent.screenX + <window-shift-x>
  • new.screenY = parent.screenY + <window-shift-y>

Window shift size when opening

Chrome

macOS Win10 Linux
<window-shift-x> 22 10 2
<window-shift-y> 22 10 38

Firefox

macOS Win10 Linux
<window-shift-x> 22 22 ---
<window-shift-y> 22 22 ---
  • On Linux, the window position is always (65, 24) = (availLeft, availTop)

Vivaldi

Vivaldi always opens a window as a frame window (a tab window)

Safari

macOS
<window-shift-x> 21
<window-shift-y> 23

IE11

Win10
<window-shift-x> 26
<window-shift-y> 26

Edge

Win10
<window-shift-x> 32
<window-shift-y> 32
@guest271314
Copy link

Have you found any way to open a window with width and height set to 0?

@sttk
Copy link
Author

sttk commented Nov 23, 2022

@guest271314 No, I haven't. Though this research is old and I don't know about current browsers, there were minimum sizes that are not 0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment