Member Avatar for riahc3

Hello

Lets clear it up a bit: I want to get the width and height of the browser window where I can click. This does not include scrollbars/toolbars. I thought it was with innerheight/width. Strangly, width works (I resize it and onload shoots a alert and it is changed) but height does not work. It stays a fixed value.

Whats wrong?

Firefox 18.0.1

  • 3 Contributors
  • 9 Replies
  • 287 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by riahc3

Dani AI

Generated

Brief summary and context: the value sought in this thread is the page viewport — the area where clicks and layout occur — not the outer browser chrome (toolbars, window frame). observed width changing while height stayed fixed; guessed the inner* properties; correctly pointed out the viewport vs. outer window distinction. In modern browsers the root element’s client size and the newer Visual Viewport API are the reliable sources for the viewport; window-level values behave differently across engines and may include scrollbars or reflect the layout viewport rather than the visible area. (developer.mozilla.org)

Robust, cross-browser approach (desktop + mobile): prefer the Visual Viewport when available, otherwise use the document-mode-aware client-size fallback (standards-mode → root element, quirks → body). The function below implements that logic and avoids race conditions caused by layout/toolbar changes on mobile.

function getViewportSize() {
  if (window.visualViewport) {
    return { width: window.visualViewport.width, height: window.visualViewport.height };
  }
  if (document.compatMode === 'CSS1Compat') {
    return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight };
  }
  return { width: document.body.clientWidth, height: document.body.clientHeight };
}

Use the Visual Viewport on mobile because the browser often exposes a separate visual viewport (what’s actually visible) and a layout viewport (what the page thinks its size is); that difference is why height sometimes looks “stuck.” Also check document.compatMode/doctype so the correct root is used in standards vs. quirks mode. (developer.mozilla.org)

Practical debugging tips: ensure a modern doctype (<!doctype html>) so the root element represents the viewport; measure after layout (onload or on resize, and consider requestAnimationFrame or debounced resize handlers); test on real mobile where the address bar changes size (the 100vh issue) and prefer the Visual Viewport or dynamic viewport CSS units where supported. For resize listeners and logging during testing, use the window resize event and throttle/debounce to avoid excessive work. (css-tricks.com)

A short verification step used by many developers is to evaluate the helper in the console while resizing (desktop) and while showing/hiding mobile chrome (mobile) to confirm which metric matches the intended clickable area.

Recommended Answers

All 9 Replies

Member Avatar for riahc3

I find it very difficult to believe that something so simple such as window height/width noone knows why it doesnt work.

My code is a simple popup showing those two values....

Member Avatar for JayJ

I thought it was innerWidth and innerHeight too

var w=window.innerWidth;
var h=window.innerHeight;

Neither of those work?

Member Avatar for gon1387

Actually it's not that simple to get the size of the the window on different browsers, it can give you a lot of headache. :D

For FF, if you're after the browser window size, then use window.outerWidth and window.outerHeight. But then, if you want to get the viewport, it's document.documentElement.clientHeight and document.documentElement.clientWidth.

Member Avatar for riahc3

Yes, the "viewport" (I guess you ment "viewpoint") is what Im after. Ill try it shortly.

Member Avatar for riahc3

Actually it's not that simple to get the size of the the window on different browsers, it can give you a lot of headache. :D For FF, if you're after the browser window size, then use window.outerWidth and window.outerHeight. But then, if you want to get the viewport, it's document.documentElement.clientHeight and document.documentElement.clientWidth.

Damn it.

Then what ways can be done? Lets leave it to IE9+, Firefox, and Chrome. Fuck Opera.

Member Avatar for gon1387

It's viewport.

The two properties will do for the new browser versions.

Member Avatar for riahc3

document.documentElement.clientHeight is working pretty good on all....

I just need IE9+

Member Avatar for gon1387

You're luckiest dev to have just an IE9+ requirement.

Anyway, riahc3 please mark this as solve if you got your answers to your queries.

Member Avatar for riahc3

You're luckiest dev to have just an IE9+ requirement.

Anyway, riahc3 please mark this as solve if you got your answers to your queries.

Devs have to start putting down their foot saying it just cannot be done in a modern browser. Noone should be running IE6 or less.

Clients usually believe anything. They will believe explorer.exe is a virus if we convince them.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.