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];
}

Resizing my Table or Window? HTML5

Trying to get my application to fit into the browser window both width and height keeping proportions.
I have included a JS fiddle of an example: http://jsfiddle.net/4Mjtr/3/
Was sliced in photoshop so the way the html is output is each div class has its own css e.g
//HTML//
<div class="id1462-Select-Pattern">
<img src="http://www.travel-master.co.uk/coach-hire-minibus-images/email-quote.jpg"width="183" height="45" alt="" />
</div>
//CSS//
div.id1462-Select-Pattern {
position:absolute;
left:80px;
top:723px;
width:183px;
height:45px;
}
I have tried media queries but the canvas and images dont seem to resize also i read that with text you have to manually change the font size but the images are not resizing properly

Remove the Height from the image, setting only the width will resize the image and keep proportions as well.
You can use javascript function to get the browser's Width & Height, would be something like:
function getBrowserWindowSize() {
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;
}
var currWindow = new Array();
currWindow[0] = myWidth;
currWindow[1] = myHeight;
return currWindow;
}
And you can manage your desired elements width & height with the resize and load events by calling this function again.

How to detect browser height, subtract a certain number of pixels, then output the number?

Is this possible? Use of jQuery is also available.

You've said "browser height" both in the question and, when asked to clarify, in the comments on the question.
The answer is: No, it isn't possible to find out the height of the browser window. But then, 99.99999% of the time, you don't care.
You can find out:
The height of the displayed area of the page (the viewport) via $(window).height(); more
The height of the document as a whole (which can be shorter or taller than the viewport) via $(document).height() (same link)
And usually even the height of the user's screen (via window.screen.height)
None of these gives you the height of the browser window, though.

The following code sets the variables winW and winH to the inner width and height of the browser window, and outputs the width and height values. If the user has a very old browser, then winW and winH are set to 630 and 460, respectively.
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
document.writeln('Window width = '+winW);
document.writeln('Window height = '+winH);
taken from here
You can ofcourse substract/add/multiply/whatever you want before printing the values.

You either need:
$(window).height();//viewport
OR
$(document).height();//complete document
OR
window.screen.height;//screen resolution height
It returns an integer value, so you can do calculations on it

alert( $(window).height() - 100 );

height() is what you are looking for..
http://api.jquery.com/height/
var heght= $(window).height(); //this gives you the height of the window
alert(heght - 50);

$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document

You may also use:
document.body.clientHeight

You should look for height function of Jquery like this
$(window).height() or $(document).height()
and for subtracting pixels just use $(window).height()-5

function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
) - mynumber ;
}
If the actual document’s body height is less than the viewport height then it will return the viewport height instead.
And jQuery Method:
$.getDocHeight = function(){
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
alert( $.getDocHeight() - mynumber);

window.innerWidth can't work on IE7. How to fix via JS and jQuery?

I wanna get the width of browser window. It should contain the width of scroll bar if exists.
How to fix this issue via JS?
How to fix this issue via jQuery?
Thank you!

There are many examples of this scattered around the web. It's a common problem. Here's what I found in a quick search
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
http://www.javascripter.net/faq/browserw.htm

this would fix using a jquery
$(window).innerWidth();

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