I have a web-app for iPad. The app uses the iPad keyboard, before when opening the keyboard it would cover the app, now with ios7 the app gets shrinked to the remaining space after the keyboard appears.

Is it possible to change this in JavaScript, and keep the old behavior?

EDIT: I just noticed that if I open the app on safari it works just like before, the problem appears when I add the app to the main screen.

EDIT: I almost solved this, but then I got some other problems.

First I added this height=device-height to the meta tag I was using:

<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width, height=device-height">

But then a small part of my app (the size of the iPad top bar) would be hidden at the bottom. So I did this:

$("#my_app").css("height",window.innerHeight);

When I opened the app again it was perfect. But when I open the keyboard, it moves up and wont e down when I close the keyboard. So now at the bottom of the iPad is a black line, and the app is a little bit hidden under the top bar of the iPad.

Can any one help with this?

I have a web-app for iPad. The app uses the iPad keyboard, before when opening the keyboard it would cover the app, now with ios7 the app gets shrinked to the remaining space after the keyboard appears.

Is it possible to change this in JavaScript, and keep the old behavior?

EDIT: I just noticed that if I open the app on safari it works just like before, the problem appears when I add the app to the main screen.

EDIT: I almost solved this, but then I got some other problems.

First I added this height=device-height to the meta tag I was using:

<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width, height=device-height">

But then a small part of my app (the size of the iPad top bar) would be hidden at the bottom. So I did this:

$("#my_app").css("height",window.innerHeight);

When I opened the app again it was perfect. But when I open the keyboard, it moves up and wont e down when I close the keyboard. So now at the bottom of the iPad is a black line, and the app is a little bit hidden under the top bar of the iPad.

Can any one help with this?

• javascript
• html
• web-applications
• keyboard
• ios7

Share Improve this question Follow edited May 10, 2015 at 16:43 rmtheis 5,8941313 gold badges6565 silver badges8181 bronze badges asked Sep 20, 2013 at 10:18 KatTKatT 21744 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

The solution ended up being very simple.

I removed this height=device-height again, and just left this $("#my_app").css("height",window.innerHeight); and every thing was fine again.

<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width, height=1004"> 

hello I am Spanish and I do not speak English well. My solution has been to the highest in pixels (1004)