Phonegap: Изменение высоты окна клавиатуры в iOS 7

Ответ 1

Я тоже это видел. После изменения высоты некоторые из наших элементов с абсолютным расположением исчезают в нижней части экрана.

Я обнаружил, что с KeyBoardShrinksView = false в ios7, window.height остался постоянным. Это было противоположно ios6, хотя и немного уловка.

Не уверен, есть ли лучший способ справиться с этим в Phonegap, но я поместил это в CDVViewController.m, созданный в файлы config.xml для ios < v7 и ios > v6, и мое приложение работает так, как я хочу. Казалось, немного взломанный, но не слишком разрушительный остальной части моего кода.

// read from config.xml in the app bundle
NSString* path = [[NSBundle mainBundle] pathForResource:@"config" ofType:@"xml"];

if (IsAtLeastiOSVersion(@"7.0")) {
    path = [[NSBundle mainBundle] pathForResource:@"config_ios7" ofType:@"xml"];
}

(Я также попробовал плагин настроек приложений в https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/ApplicationPreferences, но не думаю, что это было предназначено для такого предпочтения.)

Ответ 2

После того как я обновил свой проект до iOS с помощью cordova 3.1, у меня возникают аналогичные проблемы для полей ввода, в которых у меня не было кода, указанного выше. Клавиатура подталкивает вещи вверх, а верхний и нижний колонтитулы не возвращаются к исходным позициям. Я тестировал и решал проблему (может быть, не очень элегантно, но это обходной путь). Я просто поместил этот код в мое событие на странице.

 /************************************************************************************************* 
 * 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 );
 });

Ответ 3

добавить код в CDVViewController.m например, он добавлен в функцию webViewDidFinishLoad

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];

измените этот код <meta name="viewport" content="..."> и установите высота устройства

Ответ 4

Решение Петраша работало для меня. Но у меня все еще были проблемы с поддержкой вращения iPad. Итак, в том же CDVViewController.m Я добавил этот метод:

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
    [super didRotateFromInterfaceOrientation:fromInterfaceOrientation];
    if (self.webView){
        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=1, minimum-scale=1, width=device-width, height=%d,  target-densitydpi=device-dpi');",  (int) newFrame.size.height*1 ];

        [self.webView stringByEvaluatingJavaScriptFromString:JS];
    }

}

и, чтобы поддержать "немасштабируемое" поведение, отредактировал решение Петраша таким образом:

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=1, minimum-scale=1, width=device-width, height=%d,  target-densitydpi=device-dpi');",  (int) newFrame.size.height*1 ];

    [self.webView stringByEvaluatingJavaScriptFromString:JS];

KeyboardShrinksView = false

Это взломанный, но он работает от 5.1 до 7.0.3. Протестировано на Кордове 3.0.

Ответ 5

установите метатег вашего просмотра в свой html

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

или

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

Ответ 6

Лучший способ, который я нашел, - поместить все в div и исправить его высоту с помощью javascript. Работает на современных версиях iOS (5, 6, 7) и 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>

Ответ 7

После нескольких часов расследования мне удалось заставить его работать:

Мой div, который подталкивается и никогда не спускается снова, имел атрибут css

position:fixed;

Я переключил это на

position:absolute;

и все сработало!

Ответ 8

У меня была аналогичная проблема, которая приводила меня в бешенство в течение нескольких дней. Не уверен, что это поможет кому-то еще, но это то, что разрешило это для меня: (обратите внимание, что я использую библиотеку jquery finger для прослушивания событий нажатия):

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

Для меня размывание на любом текстовом поле в представлении было трюком. StopImmediatePropagation избавилась от какой-то другой забавы.

Ответ 9

У меня была такая же проблема, и мне удалось отследить ее до динамического контента. Первоначально у меня был пустой div, заполненный текстом с помощью javascript. Когда я предварительно заполнил div статическим текстом, проблема исчезла.

Похоже, что эта высота не учитывалась при изменении размера.