Databases
StackOverflow2013
Postsdbo
POMobile Webkit: reliably detect viewable area in all situations?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMobile Webkit: reliably detect viewable area in all situations?
    text
    copied!<p>Short version: In my mobile web app I want to always detect the <em>viewable area</em> of the screen (e.g., the space between the top of the soft keyboard (if present) and the bottom of the titlebar), so I can adjust my layout, without zooming, and keep the page completely visible on-screen at all times. Is there any reliable way to do this?</p> <hr> <p>Longer version: In the app I'm grabbing all touch events and controlling panning and zooming myself. Control bars are fixed at top and bottom of the screen, always visible. My veiwport settings are:</p> <pre><code> &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no"&gt; </code></pre> <p>My wish is to always adapt my page layout to the viewable area of the browser window, so nothing is ever off-screen. So, when the keyboard appears or disappears, or when orientation changes, I need to detect the width and height and re-layout accordingly.</p> <p>If not for the on-screen keyboard, <strong>window.innerWidth</strong> and <strong>window.innerHeight</strong> would suffice. When the keyboard appears, though, things get wacky (works only under certain tightly controlled conditions). And heaven forbid there's an orientation change while the keyboard is up.</p> <p>Is there anything in the DOM that can tell me what I want? I really would prefer to figure this out dynamically rather than hardwire the size of the interface elements into my code, but I'll resort to that if there's no other way.</p> <p>Sorry for the verbosity, it's hard to capture all the weirdness I've been experiencing. My testing has been predominantly on an iPad running 3.2 and an iPhone running 4.1; behavior has been consistently inconsistent across both.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload