Develop Reference

How to detect screen size for responsive web design?

I googled this and got a quirksmode site that gives you your screen size. Pulling up the console I see that screen.width and screen.height are directly available from the window object.
I want to do the detection in pure JavaScript to get started. Can I use this property across all devices and browsers - mobile, tablet, PC and Chrome, Safari, IE, Firefox.
I don't care about the view port changing due to re-sizing etc. Just the actual size of the screen which does not change.
I was hoping there was a single property I could check across devices and browsers.
Here is some general info by wikipedia on responsive web design.

Take a look at Get the device width in javascript
Media Queries work in js too:
if (window.matchMedia('screen and (max-width: 768px)').matches) {}
Another way would be:
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

screen.width is the property your are looking for.

This is what worked for me after long hunch.
These attributes below provide responsive sizes based on new tab size.
window.innerWidth
window.innerHeight

How to get the maximum available screen height in java script?

document/window outerHeight provides the size of the window (e.g when the browser windows is re-sized the value changes ).
screen.availHeight gives you the actual screen size (including the actual browser navigation etc)
I tried creating a fixed div set with top:0,buttom:0 and get the outerHeight but it's also restricted to the window's current size.
What is the best way to get the max available height when the window is maximized ?
Thanks.
EDIT
The answer, provided with the help of #Greg Burghardt is
screen.availHeight - (window.outerHeight - window.innerHeight)

You may be looking for:
document.documentElement.offset[Height|Width]
A good reference: A Tale of Two Viewports

Visual viewport detection in Firefox mobile browser

As the subject says, I need these zoom-tainted viewport dimensions (CSS-pixels) in Firefox mobile browser. How do I extract that?
In webkit browsers it goes by window.innerWidth / innerHeight and works fine, but I just can't find the corresponding values for Firefox.

I had the same problem and came up with the following solution:
Place a zero-pixel size "dummy" div in the bottom right corner of the screen (using "position:fixed") and query its position via getBoundingClientRect().left/top, which gives the width/height of the visual viewport.
Example code (querying only the width):
<div id="dummy" style="position:fixed;right:0;bottom:0"></div>
<button onclick="alert(
'innerWidth: ' + window.innerWidth + ' / ' +
document.getElementById('dummy').getBoundingClientRect().left
);">Test</button>
Loading the above web page in a browser and pressing the "Test" button will display the viewport widths as queried via the window.innerWidth and the getBoundingClientRect() methods.
On desktop Firefox, both methods yield the width of the visual viewport in CSS pixels, which depends on the window width and zoom level.
On mobile Firefox, window.innerWidth gives the width of the layout viewport (which is independent of zoom level, and pretty much useless for our purpose). On the contrary, the getBoundingClientRect() method does indeed yield the current width of the visual viewport in CSS pixels.
Tested on Desktop FF ver 19.0.2 and on Firefox mobile ver 24.0.

window.innerWidth
window.innerHeight
these two work for all browsers

This is easy with jQuery.documentSize (which I wrote). You can query the size of the layout viewport and the size of the visual viewport with it. It also handles the bug which affects the innerWidth, innerHeight implementations in older versions of Firefox.
Despite the name, it is written in vanilla Javascript, and you can use it without jQuery, too.
visualWidth = $.windowWidth( { viewport: "visual" } );
layoutWidth = $.windowWidth( { viewport: "layout" } );
Likewise for height.
(This question is really old, and the participants probably won't care, but at least it has prompted me to test jQuery.documentSize with Firefox for Android, which I hadn't done yet. Works as expected.)

Detect Chrome browser window width and height to prevent element overflow

I'm looking for a code that either:
Prevents an element from extending beyond the edge of a window.
OR
Detects the window width or height so that the element's width/height may be set in units of px.
This code only needs to work in Google Chrome.
I've done a LOT of research and everything looks so complicated. Isn't there a simple CSS solution?
Thanks much in advance!

I had a similar problem that jQuery solved for me,
var width = jQuery(window).width();
there's also a .height() method

$(window).width(); & $(window).height(); are coming out differently in every browser

I am relying on $(window).width(); & $(window).height(); for a resizing function and they seem to come out differently in different browser, same thing is also happening with innerWidth/innerHeight. What is the best way of getting an accurate value for this?
Thanks for any help
Thanks for inpt - for clarification I am using jquery Thanks but I am using 1.7.1 and I have the following css:
*{padding:0;margin:0;border:0;}
with no changes to padding or margin in html or body

$(window).width() is get the browser viewport width, why the ie browser get the less width? because in the left side of the browser, it has a border. so when you use the .width mothed, the ie browser's width will less than chrome\safari\firefox's.

Turns out the documentation clarifies that:
$(window).width(); // returns width of browser viewport
So being the viewport, each browser has a different viewport usable area.

it is a old version jquery bug

Ensure you're using body, html {margin:0; padding:0;} - might be default values in different browsers otherwise.