What is the difference between window.innerWidth window.outerWidth? - javascript

I examined the window object in Firebug. window.innerWidth and window.outerWidth are both 1230.
What is the difference between these two values?

From Mozilla Developer Network:
window.outerWidth
window.outerWidth gets the width of the outside of the browser window.
It represents the width of the whole browser window including sidebar
(if expanded), window chrome and window resizing borders/handles.
and
window.innerWidth
Width (in pixels) of the browser window viewport including, if
rendered, the vertical scrollbar.
This is ostensibly how they work. A test page, however, shows they are both the same no matter how I resize them in Firefox 14.0.1 on Ubuntu 12.04. In Chromium, they return numbers that are 8 pixels different. Doing a bit of dead reckoning, it appears the window chrome on that particular app is about 4 pixels on the left side and 4 pixels on the right side and that this difference is being correctly picked up in that browser.
Code for the test page I used:
<!DOCTYPE html>
<html lang="en">
<head>
<title>12066093</title>
<meta charset="utf-8">
</head>
<body>
<div style="width:2000px; height: 2000px;">hi</div>
<script type="text/javascript">
alert("window.innerWidth: " + window.innerWidth + "\nwindow.outerWidth: " + window.outerWidth);
</script>
</body>
</html>

Check the Mozilla reference for window.innerWidth and window.outerWidth. If your operating system/window manager has them, window.outerWidth includes the window borders, resizing handles, and sidebars.
Try opening the bookmarks or history sidebar, then trying that again in Firebug.

Related

Jquery window.resize(event) => {} works for inspect element but not when the chrome (or edge) window is resized

There are many many questions regarding resize (event) not working online, but I was only able to find one that actually reflected my exact problem but did not have an answer.
When I use inspector, my website changes from the desktop version to the mobile version when it reaches the breakpoint of <= 540px width. However, when I resize the entire chrome window, nothing happens (even though my window does get smaller than 540px width).
I'm not sure if the mobile version will actually work on a mobile as I have no way of testing that currently, but I'm unsure as to whether this is a normal thing with Chrome and the website will work perfectly well on desktop and mobile or whether I'm doing something wrong.
The related piece of code:
$(window).resize((event) => {
const windowWidth = window.screen.width;
if (windowWidth <= 540) {
$('.className1').addClass('d-none');
$('.classname2').css("width", "100%");
$('.classname3').css("left", "3%");
$('.classname3').css("width", "100%");
$('.classname4').css("width", "90%");
This is not the entire method but it basically shows the idea that css and attributes change based on window width dropping below 540px.
What I tried:
Document.resize (failed)
I really hope this isn't a duplicate, it's hard to navigate the vast number of questions out there.
The problem is not with the resize event or with browser. It's occurring because you're using window.screen.width, which is relative to the screen, not to the browser window. It doesn't matter if you resize the browser window, the screen width will not change. For example, if your screen has resolution of 1900x1200, screen.width will always be 1900. Hence, you should use window.innerWidth, or just innerWidth to get the viewport width. To know more, see this question.
Your code would be that way:
(window).resize((event) => {
if (innerWidth <= 540) {
$('.className1').addClass('d-none');
$('.classname2').css("width", "100%");
$('.classname3').css("left", "3%");
$('.classname3').css("width", "100%");
$('.classname4').css("width", "90%");
An example of working code (open the snippet in full page and resize it):
$(window).resize((event) => {
if (innerWidth <= 540) {
document.write('It\'s working.');
}
});
<html>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>

How can I open a new popup window on Google Chrome that adjusts to any screen without going over Windows' taskbar?

I've been trying to create a popup launcher that fits the screen without overlapping Windows' taskbar, I've done some research, and even created the HTML file, but it doesn't quite work properly, it overlaps the taskbar and even goes beyond it. How can achieve such task, and what am I doing wrong?
Code: ( Run it on your desktop )
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>winds</title>
</head>
<body>
<script>
function fc()
{
window.open('http://www.google.com.br','window','menubar=yes,screenX=0,screenY=0,top=0,left=0,location=no,status=no,toolbar=no,scrollbars=yes,resizable=no,width=' + (screen.width - 10) + ',height=' + screen.availHeight);
}
</script>
Chrome
</body>
</html>
It turns out window.outerWidth and window.outerHeight have been around a while but did not show up in IE until IE9.
The following code example opens a window with maximum size but clear of task bars by first opening it with minimum size and then resizing the opened window to occupy all of the available area.
function splashOpen(url)
{
var winFeatures = 'screenX=0,screenY=0,top=0,left=0,scrollbars,width=100,height=100';
var winName = 'window';
var win = window.open(url,winName, winFeatures);
var extraWidth = win.screen.availWidth - win.outerWidth;
var extraHeight = win.screen.availHeight - win.outerHeight;
win.resizeBy(extraWidth, extraHeight);
return win;
}
// and test
splashOpen("javascript:'hello folks and world'");
Noting:
the MDN wiki example of a window features string appears to be incorrect: include the names of features required and omit those not required.
Users may have selectively disabled suppression of widow.open features. (In Mozilla Firefox see about:config under dom.disable_window_open_feature to prevent popups hiding location details or disabling other useful features.)

How to detect the minimal-ui support?

iOS 8 removed "minimal-ui" viewport property support. How to detect if browser is iOS Safari and if it supports "minimal-ui"?
Adding "minimal-ui" to the viewport does not cause an error, making feature detection harder.
var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'minimal-ui');
document.head.appendChild(meta);
// No error.
I'd like to avoid version detection:
var version = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
version = [parseInt(version[1], 10), parseInt(version[2], 10), parseInt(version[3] || 0, 10)];
if (version[0] > 8) { /* [..] */ }
Because it is unknown what is the future of "minimal-ui".
The only reliable solution that I have found is adding "minimal-ui". Then on page load checking the window.innerHeight. If it is greater than the height with the chrome around, "minimal-ui" is supported. This will work, because even if page is displayed in "soft" full screen mode (when user touch-drag the page to enter the no-chrome view), window.innerHeight does not reflect the "soft" fullscreen height until after the implicit scroll/resize event, e.g.
Assuming iOS 8, iPhone 5s and page loaded in "soft" full screen:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="minimal-ui">
</head>
<body style="height: 1000px;"> <!-- Document height must be greater than the viewport to enter the soft fullscreen. -->
<script>
if (window.innerHeight == 460) {
// We know that minimal-ui is not supported because initial
// window hight is that of browser window with the chrome.
}
// This event is called instantly after page load.
window.addEventListener('resize', function () {
window.innerHeight; // 529
});
</script>
</body>
</html>

Mobile Safari and Android Chrome don't return correct screen resolution

on iPHONE5s(640*1136), mobile safari returns 320*568. window.innerWidth and innerHeight return 981*1409
on Compaq 8 1400(768*1024), Android Chrome returns 768*976.window.innerWidth and innerHeight return
980*1103.
1.How can i correctly detect the correct screen resolution with mobile safari and chrome?
2.Why window.innerWidth and innerHeight return values which are much larger than screen resolution?
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<script>
console.log(window.screen.width);
console.log("<br />");
console.log(window.screen.height);
console.log("<br />");
</script>
<body>
<br/>===================================<br/>
</body>
</html>
I think window.screen.width and window.screen.height always return viewport size in pixel, which is always 320*568 for iPhone5 and up, and 320*480 for iPHone4s and below.
window.innerWidth will return the actual pixel size. They are different.
You can check the viewport size of popular devices here: http://viewportsizes.com/?filter=iphone
In mobile phone, the viewport size is not always equal resolution, whereas in desktop computer, you can assume they are the same.
Use wiewport metatag to adjust page width to screen width on mobile device:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
By the way, you will get not physical pixels, but css pixels, used to measure all elements that you define using px in css. For example, on all iPhones viewport width is 320px (for both retina and non-retina displays)--this is made to make pages look similar on various mobile devices, independently on pixel density.

How to find page width in Opera 12 (for Desktop Windows)?

I want to access full page width & height in Opera. Note I am not asking about Viewport's height or width, I want page's/document's width & height. I am using Opera 12.12
I have tried the following:
document.body.scrollWidth/Height
document.body.offsetWidth/Height
window.innerWidth/Height
document.body.clientWidth/Height
And all of them gives viewport's width/height.
Please use the following link:
http://jsfiddle.net/RQhYR/
Or use the following HTML Page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div style="width:2000px;height:2000px;background-color: blue;"></div>
</body>
<script type="text/javascript">
alert(window.outerWidth + "," + window.outerHeight);
</script>
</html>
I'm getting the correct values from body.offsetWidth/Height, body.scrollWidth/Height and body.clientWidth/Height (using the same build as you). Only window.innerWidth/Height is supposed to return browser window viewport.
Maybe you've got some odd CSS that sets the dimensions of the body to the viewport and puts the scrollbar on an element somewhere inside. In your case, I'm getting the expected values of 2000 x 2000 px from the scrollWidth/Height of the <html>, see demo.
Try these on for size:
window.outerHeight;
window.outerWidth;
Thanks to Bergi I got the answer of my question. I have been doing some investigation about Page & Viewport sizes in different browsers and this is what I have found: Google Doc Spreadsheet

Categories