// On Android, "resize" fires on orientation change, but ALSO every time
// the on-screen keyboard pops up. (iOS does not do this.)
// And changing the document layout hides the Android keyboard again!
// So on Android, we must use the "orientationchange" event instead.
// But iOS does not fire "orientationchange"! FFFFFFuuuuuuuuu....!!!!
//
if (navigator.userAgent.match (/Android/i)) {
 // Is this an Android thing or a Chrome thing? Do I need to match
 // on other Android browsers? Who fucking knows.
 // Oh, also the window isn't resized yet when this pigfucker fires.
 // Is half a second enough time? Who fucking knows.
 window.addEventListener ("orientationchange",
   function() { setTimeout (dnairc_resize, 500); });
} else {
 window.addEventListener ("resize", dnairc_resize);
}

Anyway, please go watch my webcast on your weird-assed phone and tell me whether it fucks up in some new and exciting way.

Update: To be clear, the way it's trying to lay things out is:

• Portrait: Video is full width; chat is below it.
  • But if that chat would be below a minimum height, it is omitted and you get video only.
• Landscape: Video on the left, chat on the right.
  • But if that chat would take up more than 50% of the screen, it is omitted and video goes full-width.

This means that on particularly small screens, you might get video-and-chat in portrait and video-only in landscape.

This Android nonsense of resizing the window when the keyboard is exposed means that it switches between portrait and landscape when the keyboard pops up, so everything tried to re-flow, and somehow that caused the keyboard to disappear again.

Previously I had attempted to do all of this with CSS media selectors instead of computing all of the sizes in Javascript, but that was even more of a nightmare.

Previously, previously, previously.