发表新帖
发表新帖

Phonegap: Keyboard changes window height in iOS 7

前端 未结
关注
9 567
一整个雨季
一整个雨季 2020-12-14 21:48

In iOS 6 everything works fine. The keyboard opens and moves the input into view. When the keyboard closes everything goes back where it should.

In iOS 7 the keyboar

相关标签:
9条回答
  • 清歌不尽
    2020-12-14 22:10

    The best way I found was to put everything into a div and fix its height via javascript. Works on modern Versions of both iOS (5, 6, 7) and Android (4.2, ...).

    <style>
    body {
        overflow-y: scroll;
        overflow-x: hidden;
        webkit-overflow-scrolling: touch;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    body > .viewport{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
</style>

<body>
    <div class='viewport'>
        <!-- Put everything here -->
    </div>
</body>

<script type="text/javascript">
    $("body > .viewport").height($(document).height());
    // WARNING: if your app works in both landscape and portrait modus, then you should reset the height of the container when the app changes orientation
</script>
    0 讨论(0)
  • 春和景丽
    2020-12-14 22:11

    I had a similar issue that drove me nuts for days. Not sure if this will help anyone else, but this is what solved it for me: (note I'm using jquery finger library to listen to tap events):

    $('body').delegate("#send_feedback_button","tap", function(event){
  $('textarea').blur();
  event.stopImmediatePropagation();
  // do my stuff 
});

    For me calling blur on any textarea in the view was the trick. The stopImmediatePropagation got rid of some other funkiness.

    0 讨论(0)
  • 栀梦
    2020-12-14 22:19

    add code into CDVViewController.m for example it added into webViewDidFinishLoad function 

    CGRect newFrame = self.webView.bounds;
NSLog(@"%f" , newFrame.size.height);

NSString *JS =  [NSString stringWithFormat:@"viewport = document.querySelector('meta[name=viewport]'); viewport.setAttribute('content', 'user-scalable=no, initial-scale=1.0, maximum-scale=0.5, minimum-scale=0.5, width=device-width, height=%d,  target-densitydpi=device-dpi');",  (int) newFrame.size.height*2 ];

[self.webView stringByEvaluatingJavaScriptFromString:JS];

    this code change <meta name="viewport" content="..."> and set height of device

    0 讨论(0)
  • 臣服心动
    2020-12-14 22:20

    After I upgraded my project to iOS with cordova 3.1 I start having similar problems for the input fields in where I did not have the code listed above. The keyboard pushes things up and the header and footer did not returned to their original positions. I have tested and that solve the problem (maybe not very elegantly but it is a workaround). I just put that code on my pageinit event.

     /************************************************************************************************* 
 * FIX: to avoid the buggy header and footer to jump and stick not
 * to the top/bottom of the page after an input or textfield lost focus and the keyboard dissapear                          *
 *************************************************************************************************/ 
 $('input, textarea')
 .on('focus', function (e) {
    $('header, footer').css('position', 'absolute');
 })
 .on('blur', function (e) {
    $('header, footer').css('position', 'fixed');
    //force page redraw to fix incorrectly positioned fixed elements
    setTimeout( function() {
        window.scrollTo( $.mobile.window.scrollLeft(), $.mobile.window.scrollTop() );
    }, 20 );
 });
    0 讨论(0)
  • 心在旅途
    2020-12-14 22:21

    set your viewport meta tag to your html

    <meta name="viewport" content="width=device-width,height=**yourheight**, initial-scale=1, maximum-scale=1, user-scalable=0" >

    or 

    <meta name="viewport" content="width=device-width,height=**device-height**, initial-scale=1, maximum-scale=1, user-scalable=0" >
    0 讨论(0)
  • 梦谈多话
    2020-12-14 22:29

    After hours of investigating I've managed to get it to work:

    My div, that is pushed up and never get's down again, had the css attribute

    position:fixed;

    I switched this to

    position:absolute;

    and everything worked!

    0 讨论(0)
 看不清?
提交回复
热议问题