I've just begun investigating support for split-screen multitasking in my Cordova app. So far the app displays and resizes fine on iPads in the simulator, but when I click on an edit field and the software keyboard is displayed, the value for 100% width starts returning the whole screen, not the window it's been given.
Initial display -- so far, so good...
Nope. The app is now displaying outside its window.
Page HTML:
<html>
...
<body>
<div class="page">
...
</div>
</body>
</html>
CSS:
.page {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
EDIT: Viewport Meta
<meta name="viewport" content="initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1, viewport-fit=cover">
Before the keyboard displays, I have a computed width of 551px for the page
class div. After the keyboard displays, I have a computed width of 1112px. Any idea why displaying the keyboard would cause the width to return an incorrect value -- or what I can do to get a correct app width? I should also mention that I'm using the cordova-plugin-keyboard
for some keyboard functions.