We Keep Coding

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.

Event to detect "Tablet" mode transition in Chrome OS?

I recently purchased an ASUS c100p Chromebook and noticed that when the device is flipped all the way back into "tablet" mode that sizable windows are maximized by default. If they have fixed window bounds they are effectively treated as modal (centered, immovable, and peripheral areas are dimmed) when in the foreground, unless they are set to have the alwaysOnTop attribute in which case they can be moved freely. I want to be able to detect this change so I can have an app with fixed window bounds perform some sort of action (maximize, close, set to alwaysOnTop, etc.). Is there a some way of detecting this transition in Javascript?
I've tried the following events with no success:
chrome.app.window.onFullscreened - Nothing fires on transition.
chrome.app.window.onMaximized - Fires on resizable windows, but not windows with fixed bounds.
chrome.system.display.onDisplayChanged - Fires if device is rotated from landscape to portrait while transitioning, but not if going straight to landscape tablet mode.

You could detect to see if the inner width and height of the window is the same as the fixed bounds with this code:
if(window.innerWidth != 400 || window.innerHeight != 400) {
// some code, eg window.close()
}
Replace the 400s with the width and height the window is being opened with.

Get height of virtual keyboard in browser in Windows 8 Metro mode

I have an issue when using Internet Explorer 10 on a Windows 8 tablet in Metro mode. When visible the keyboard overlaps a part of the browser its content. In order to provide a good user experience I need to resize that content. And to do that I need the remaining height of the browser. Can someone point me in the right direction how to get the height of the virtual keyboard?

There is no way to get height of virtual keyboard in browser, but on IE 10 metro mode, you can use onresize event to get the available height (window.innerHeight) after the virtual keyboard is visible.
You can use the old height (when keyboard is non-visible) - new height (when keyboard is visible) to get the virtual keyboard height if you really need this.
remember, onresize event will not be fired if IE is in desktop mode when virtual keyboard is displayed.

Preventing viewport resize of web page when android soft keyboard is active

I'm developing a Javascript/JQuery plugin for Responsive Web Design. It has a function that monitors the viewport for changes, specifically resize and orientation. When a change is detected, a corresponding callback function is called.
However, I just noticed that on Android (specifically using the stock browser on a Google Galaxy Nexus), if the user tries to use the soft keyboard, it resizes the viewport, thus firing the callback function. This is behaviour I would like to eliminate.
Is there a way to - via Javascript - disable this behaviour or detect for it so I can make changes to the code base to accommodate it?!
The solutions I've seen so far have to do mainly with Android App Development and I'm not sure they apply in my case.
Thanks.

Ok, well after some fiddling around I've found out a solution to my problem.
So what happens when the soft keyboard is shown/hidden?! In my test, the viewport width remains constant. However, the viewport height changes size [((current - previous)/previous)*100] when the soft keyboard is shown by 43% (in portrait) and by 58%(in landscape); and when the soft keyboard is hidden by 73%(in portrait) and 139%(in landscape) respectively.
So what I did was disable the callback function when the following conditions are all true:
The device is mobile
The percentage change in viewport width is less than 1%
The percentage change in viewport height is greater than 35%
Since mobile device browsers do not have resize handles like on the desktop, I do not believe there will arise a situation where a user will mimic the above conditions in a natural way.
You can see a sample of the code here: https://github.com/obihill/restive.js/blob/f051fe6611e0d977e1c24c721e5ad5cb61b72c1c/src/restive.js#L4419. Unfortunately, it's part of a bigger codeset, but you should be able to glean the basic idea based on the conditionals.
Cheers.

I had a similar problem. And my solution was to use the orientation change event instead of the resize event which triggers when you least expect it on android :P
$(window).bind( 'orientationchange', function(e){ // Type pretty code here });
source: http://www.andreasnorman.com/dealing-androids-constant-browser-resizing/

I can share you with my pretty code. I was setting trigger on resize event and counting height relative to before resize event.
originalHeight * 100 / currentHeight give you precent wich you can change height container
You can see a sample of the code here
https://jsfiddle.net/ocg9Lus7/
UPDATE 19.11.2018
I recomend you change value from dynamic (100%, vh etc.) to static value after onload window. If you need more dynamic container you can reculclate sizes by bynding function to resize event (originalHeight * 100 / currentHeight)
You can see a sample of the code here: https://jsfiddle.net/gbmo6uLp/

Android onOrientationChange triggers before orientation completes (too early)

I need to read the pixel width of a DIV whenever the user rotates his phone. On iOS the following code will print out the DIV's width after the orientation completes. However, on Android the code will print out the DIV's width before the orientation starts.
HTML
<body>
<div id="foo" style="width: 80%">foo</div>
</body>
JS
window.onorientationchange = function() {
alert($('foo').getWidth());
}
For example, the user starts in portrait mode. He rotates to landscape mode. On Android, the code will print out the older narrower width, while iOS will print out the new wider width.
How do I make Android behave like iOS? The after width is important to me in my web application. The before width is useless to me.

a quick and dirty solution would be to use a timer. you can continue development until a more suitable solution comes up.
edit: just recognized that on android the onorientationchange event is fired before resize event, this is diffrent from ipads behaviour. check the resize event on android phones, does this provide the right width?