Develop Reference

Is there a way to get the real viewport size in hardware-pixels without viewport meta tag?

I want to get the viewport width with javascript. But not the common virtual viewport. I need the logical hardware viewport and in my case it's not an option to set the viewport meta tag.
To clearify my issue: I want to get 320 pixels on IPhone 5 (640 hardware pixels with pixel ratio 2) though the virtual viewport is much more than 320 pixels.
Is there a way to do that?
thanks,
Helmut

I've found my Answer in this article: http://menacingcloud.com/?c=viewportScale
.. and breaked it down to the real essential things ..
.. so, this is my result:
// cross browser way to get the common viewport width:
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
// cross browser way to get the orientation:
var isLandscape = document.documentElement.clientWidth > document.documentElement.clientHeight;
// then get the logical screen width if the screen is smaller than the viewport
// otherwise get the viewport width
var screenWidth = screen.width < viewportWidth ?
Math[isLandscape ? 'max' : 'min'](screen.width, screen.height) :
viewportWidth;
// screen width
console.log(screenWidth);
Here is a ready to use function for all of you
function getLogicalDeviceDimensions() {
// cross browser way to get the common viewport width:
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
// cross browser way to get the orientation:
var isLandscape = document.documentElement.clientWidth > document.documentElement.clientHeight;
// then get the logical screen size if the screen is smaller than the viewport
// otherwise get the viewport size
var screenWidth = screen.width < viewportWidth ?
Math[isLandscape ? 'max' : 'min'](screen.width, screen.height) :
viewportWidth;
var screenHeight = screen.height < viewportHeight ?
Math[isLandscape ? 'min' : 'max'](screen.width, screen.height) :
viewportHeight;
return [screenWidth, screenHeight];
}

absolute when not on view fixed when on view

a(this).css({
position: 'fixed',
top: "200px",
left: "1270px",
width: "30px",
height: "30px",
margin: "0"
padding: "0",
minWidth: "65px",
listStyleType: "none",
zIndex: 1e7
});
I have this bit of code, which fixes an element to the screen so that, when you scroll, it follows the screen. However, when I resize the window, say, to just have the header, the image is not where it should be when I scroll down. What I want is for it to be in an absolute position when it's not in view but, when it comes into view, it follows the page and is fixed. Is this possible?

Yes this is possible, almost everything is.
All you need to do is detect how large the viewport is whenever somebody resizes. It's a lot easier in jQuery than with normal JavaScript.
var element = a(this);
$(document).on('resize', function(){
// if viewport is smaller than offset (200) plus height (30) of element
if($(window).height() < 230){
// set element to absolute
element.css({position: 'absolute'});
}else{
// set element to fixed
element.css({position: 'fixed'});
}
}
If you don't want to use jQuery, then you can still use most of the same code, but you'll have to create a function to get the height of the viewport. JavaScript - Get Browser Height
function returnHeight() {
var myHeight = 0;
if( typeof( window.innerHeight ) === 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && document.documentElement.clientHeight ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && document.body.clientHeight) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
return myHeight;
}
var element = a(this);
function resizeCallback(){
// if viewport is smaller than offset (200) plus height (30) of element
if(returnHeight() < 230){
// set element to absolute
element.css({position: 'absolute'});
}else{
// set element to fixed
element.css({position: 'fixed'});
}
}
if(window.attachEvent) {
window.attachEvent('onresize', resizeCallback);
}
else{
window.addEventListener('resize', resizeCallback, true);
}

Get Browser Width and Height Excluding Toolbars and Menu Size

I need a Js / JQuery Script , which return me browser's available width and height excluding menu bar and toolbar size , i am using one script but it seems to be returning width / height including toolbar ect...
below is script i have used..
<script type="text/javascript" >
var winWidth = 0, winHeight = 0;
if (typeof (window.innerWidth) == 'number') {
//Non-IE
winWidth = window.innerWidth;
winHeight = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
winWidth = document.documentElement.clientWidth;
winHeight = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
//IE 4 compatible
winWidth = document.body.clientWidth;
winHeight = document.body.clientHeight;
}
</script>
Any body have any clue on this?
Thanks
Meghana

Using jQuery , you can have the following :
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document

Your code should return the usable size of your browser window. In my case, on a 1920x1200 display, I get 1920x1106. My taskbar is 40 pixels tall, so that leaves 54px for the titlebar of the window.

try:
<input type='button' id='btn1' value='test'/>
$('#btn1').click(function(){
alert($(window).width());
});
See http://jsfiddle.net/Pu2Ej/

Display live width and height values on changing window resize

In html head:
<script type="text/javascript">
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth; myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;
}
</script>
In html body:
<script type="text/javascript">
document.write('<p>' + myWidth + 'x' + myHeight + '</p>');
</script>
It works good. The question is: how can I have it to display the width/height values while resizing the browser? Like here http://quirktools.com/screenfly/ at bottom left corner.
Many thanks!

I like gilly3's solution, but it would be useful to have the full code (for those in a hurry!)
<script>
window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
// your size calculation code here
document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
};
</script>

Bind to window.onresize. Don't use document.write(). Put the <p> in your HTML and give it an id. Then just set the innerHTML of the element directly:
window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
// your size calculation code here
document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
};

Or, if you're already using jquery, you can use .resize(handler) to capture the resize event and .resize() without any parameters to trigger the initial event when the window is done loading.
Like this:
$(window).resize(function() {
// your size calculation code here
$("#dimensions").html(myWidth);
}).resize();
Demo in Fiddle

<!DOCTYPE html>
<html>
<head>
<title>How to get width of screen when window is resizing?</title>
</head>
<body>
<script>
window.onresize=function()
{
document.body.innerHTML=window.innerWidth;
}
</script>
</body>
</html>
To learn the meaning of the each line of the code - https://jaischool.com/javascript-lang/how-to-get-live-width-of-window-when-it-is-resizing.html

JavaScript - Get Browser Height

I am looking for a code snippet to get the height of the viewable area within a browser window.
I had this code, however it is somewhat bugged as if the the body doesn't exceed the height the of the window then it comes back short.
document.body.clientHeight;
I have tried a couple of other things but they either return NaN or the same height as the above.
Does anyone know how to get the real height of the browsing window?

You'll want something like this, taken from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert( 'Width = ' + myWidth );
window.alert( 'Height = ' + myHeight );
}
So that's innerHeight for modern browsers, documentElement.clientHeight for IE, body.clientHeight for deprecated/quirks.

Try using jquery:
window_size = $(window).height();

You can use the window.innerHeight

The way that I like to do it is like this with a ternary assignment.
var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
I might point out that, if you run this in the global context that from that point on you could use window.height and window.width.
Works on IE and other browsers as far as I know (I have only tested it on IE11).
Super clean and, if I am not mistaken, efficient.

There's a simpler way than a whole bunch of if statements. Use the or (||) operator.
function getBrowserDimensions() {
return {
width: (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth),
height: (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)
};
}
var browser_dims = getBrowserDimensions();
alert("Width = " + browser_dims.width + "\nHeight = " + browser_dims.height);

This should works too. First create an absolute <div> element with absolute position and 100% height:
<div id="h" style="position:absolute;top:0;bottom:0;"></div>
Then, get the window height from that element via offsetHeight
var winHeight = document.getElementById('h').offsetHeight;
Update:
function getBrowserSize() {
var div = document.createElement('div');
div.style.position = 'absolute';
div.style.top = 0;
div.style.left = 0;
div.style.width = '100%';
div.style.height = '100%';
document.documentElement.appendChild(div);
var results = {
width: div.offsetWidth,
height: div.offsetHeight
};
div.parentNode.removeChild(div); // remove the `div`
return results;
}
console.log(getBrowserSize());

var winWidth = window.screen.width;
var winHeight = window.screen.height;
document.write(winWidth, winHeight);

With JQuery you can try this $(window).innerHeight() (Works for me on Chrome, FF and IE). With bootstrap modal I used something like the following;
$('#YourModal').on('show.bs.modal', function () {
$('.modal-body').css('height', $(window).innerHeight() * 0.7);
});

I prefer the way I just figured out... No JS... 100% HTML & CSS:
(Will center it perfectly in the middle, regardless of the content size.
HTML FILE
<html><head>
<link href="jane.css" rel="stylesheet" />
</head>
<body>
<table id="container">
<tr>
<td id="centerpiece">
123
</td></tr></table>
</body></html>
CSS FILE
#container{
border:0;
width:100%;
height:100%;
}
#centerpiece{
vertical-align:middle;
text-align:center;
}
for centering images / div's held within the td, you may wish to try margin:auto; and specify a div dimension instead. -Though, saying that... the 'text-align' property will align much more than just a simple text element.

JavaScript version in case if jQuery is not an option:
window.screen.availHeight