iOS split screen width after keyboard displays

问题

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.

回答1:

It looks like this issue is coming from the Keyboard Plugin. The shrinkView logic works by directly resizing the frame of the WebView which affects the page width. In this case, it's calculating the intersection of the keyboard and the whole screen instead of just your application's window.

I was able to reproduce similar behavior and pulled in a patch that appears to solve it. (Thanks Jin Lei) I'd like to do some more testing before pushing out a release, but you can install the updated plugin directly from GitHub or manually apply the patch locally.

cordova plugin add https://github.com/cjpearson/cordova-plugin-keyboard

来源：https://stackoverflow.com/questions/56501953/ios-split-screen-width-after-keyboard-displays

标签

ios

css

cordova

split-screen