PhoneGap / JQuery Mobile - Page style breaking when keyboard is visible

问题

I have an application built with Phonegap and JQuery Mobile. Whenever the soft keyboard shows - on form inputs etc - the whole page resizes. Images, buttons and text. Which I'm assuming is something breaking the CSS?

Anyone else had this problem, or know why it might be occurring? I'm having to restart the application to reset the layout.

Any ideas appreciated!

Thanks!

回答1:

I found the answers here:

http://solutions.michaelbrooks.ca/2011/07/05/android-soft-keyboard-resizes-web-view/

http://comments.gmane.org/gmane.comp.handhelds.phonegap/10207

A combination of adding:

android:windowSoftInputMode="adjustPan"

to AndroidManifest.xml

and <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

to index.html, did the job for me.

Hope this helps someone.

回答2:

For Phonegap Build users, there's a wrapping preference available in config.xml file, the

<preference name="android-windowSoftInputMode" value="stateHidden|adjustPan" />

The values it can take are the same than android native property, if you need additional info about the parameters and behavior, please refer to android developer guide here: http://developer.android.com/guide/topics/manifest/activity-element.html#wsoft

I tested this using Phonegap Build 3.3.0 and jQuery Mobile and worked fine for me, hope it helps.

回答3:

I have a proven solution for this problem, I was also facing same problem but I solved it myself. First create a field inside body and make it hidden or you can make it hide behind a div using z-index so that it won't be visible.

<script>
$(document).ready(function() {
document.getElementById('example').value='';
});
 </script>
   <body>
   <div style='z-index:50;position:absolute;height:100%;width:100%;'>
   Your page matter here</div>
    <select id='example' style='z-index:10'>
    <option value=''>a</option>
    </select></pre>
   </body>

The moto is that we have to set this select field when the page load, and doing this will stop the flickering for sure...try it guys.....it worked for me

来源：https://stackoverflow.com/questions/6731517/phonegap-jquery-mobile-page-style-breaking-when-keyboard-is-visible

标签

android

jquery-mobile

cordova