We Keep Coding

(window).height() for iPad screens

I have a popup on my site. After the popup opens, I resize it to take up most of the screen:
jQuery( window ).resize(function() {
var windowHeight = jQuery(window).height();
jQuery('#BookingFrame').css('height', windowHeight * 0.9 | 0);
});
Problem: On iPad, the window resizes past the viewport and the bottom half of the popup disappears. There is literally no way to complete the form on an iPad.
I've seen a lot of explanations on here about the "why" but I have not been able to find a workable solution. Any changes suggested in these forums results in breaking another part of the page or site on other devices.
I'm thinking I need to identify the device ($device==iPad) and then change the windowHeight to windowHeight * 0.5 or something similar. Is this the best solution? or is there something simpler?

Depending on what browsers you need to support you could use vh units instead of px/rem/% so you eliminate the need for js to resize the popup.

Changing device orientation doesn't swap width and height

I'm trying to set the size of a background image to match the screen size upon window resize. The problem is that width and height don't alternate their values when I change the mobile orientation. When I test it in the dev tools of a desktop browser it works, however when testing in several mobile browsers, although the orientation does get changed, the measures don't.
This is the basic js:
$(function() {
function resizeBackground() {
$('#background-image').height(screen.height);
}
resizeBackground();
$(window).resize(resizeBackground);
});
Unfortunately due to a weird vh bug on iOS I'm forced to use JS. The issue here is that the background image jumps when the browser address bar of some browsers, specially Chrome and Firefox, gets hidden. It's detailed here: stackoverflow.com/questions/24944925/.

Summarizing my comments I want to describe why your solution doesn't work:
window.screen.height and window.screen.width get you the device's actual height and width and these values don't change on page resize or orientation change.
For the viewport sizes (you actually need viewport) the appropriate methods (variables) are window.outerWidth and window.outerHeight (in some cases window.innerWidth and window.innerHeight will work also).
For getting actual document size (html document), use document.documentElement.clientWidth and document.documentElement.clientHeight.
For detecting orientation change I would suggest orientationchange event instead of onresize event, because onresize also fires when keyboard is shown for example.

Those mobile browsers should support the more specific orientationchange event. Perhaps they're only firing that one and not resize. Try handling orientationchange too.
window.addEventListener('orientationchange', resizeBackground);

For Mobile Safari you can check window.orientation and if it is 90/-90, choose smaller of width/height for your "height". When orientation is 0, then choose higher value. I have now observed that when opening Mobile Safari directly in landscape, the values are swapped and do not swap on orientation change. As window.orientation is deprecated, it should only be used for Mobile Safari. FOr the rest, we use window.screen.orientation.angle.

detecting monitor resolution in explorer and firefox

I'm trying to detect the actual monitor resolution or size using either JQuery or JavaScript, the screen.availWidth or screen.width seem to work in all browsers except for firefox and explorer...
If the window is maximized it will get the information but if the window was scaled down or even zoomed it doesn't give the monitor resolution but looks at the window instead...
I've gone through several posts on here but haven't found anything and I think most of them are not stating the fact that the window size might not be maximized or zoomed when getting the wrong type of information...
I'm hoping there's a solution I'm missing, thanks ahead for any help ;)

JavaScript var x = "Available Width: " + screen.availWidth;

With jQuery:
$(window).width();
$(window).height();

Get browser window width including scrollbar

I tried to get browser window width with $(window).width();. On IE 10, it does return the full browser width, include the scroll bar. However, on Firefox and Chrome, both return the value without the scroll bar.
How can I get the browser width include with the scroll bar together? Because I need the detected width to be exactly same as CSS.
Thanks.

The first answer was close, but upon further inspection it is a bit more complicated. The body.clientWidth is the width excluding the scrollbars. The window.outerWidth is the width including the scrollbars and other window elements like the window border. The window.innerWidth is the actual width of the window, including scrollbars, but not including the window border.

This will get the full Window's width:
window.outerWidth
NOTE: jQuery's outerWidth() doesn’t work on $(window)

window.innerWidth seems to be the correct answer when needed for responsive design

window.innerWidth will give the width of the HTML and the scrollbar. This value is the value used for device width breakpoints when using media queries in CSS. Essentially, window.innerWidth is equal to the calculated CSS unit 100vw. However, window.outerWidth will give you the width of the entire window.
For example, if you had Chrome's Dev Tools open inside of the browser, window.outerWidth would be the width of the webpage + scroll bar + Chrome's Dev Tools inspector. While window.innerWidth would return the width of just the webpage + scroll bar.

resize iScroll 4 to fit 100% on any device

I'm trying to resize my wrapper, so when viewed on iPhone, iPad or computer 100% of my site is in view. I have placed pictures in my scroller using the <ul> and <il> methods.
At the moment everything is in view on my computer, but on iPhone the pictures are getting cut off. It's letting me scroll horizontally and vertically my pictures, but need to resize the wrapper so my pictures are smaller.
Any help would be amazing. Cheers in advance

You didn't provide any codes, so these maybe help you:
Set proper width/height to your wrapper when browser resizes and window.onload. Because we don't know device is in landscape or portrait mode until window.onload. Here better explained how to get resized browser width/height.
Check your images width/height. Maybe images' dimensions wider than wrapper. You can set width/height to image in percent.
And don't forget refresh iScroll when browser resizes. You can do it like that:
setTimeout(function(){myScroller.refresh()}, 400); // browser need time to rotate