Jump to content

The game gets squeezed by the on-screen keyboard


Recommended Posts

Trying to add support for mobile. My game is a typing game and I need to bring the keyboard up automatically. I added a text input element in my html with auto-focus and yes I see the keyboard once I load the page but it squeezes the canvas into the space available between the keyboard and the rest of the screen. What should i do to prevent this? 

The size of the canvas is 480x720. It should look fine on Nexus 7 which is 800x1280

Link to comment
Share on other sites

  • 3 weeks later...

I recently found some hacks to this problem. Here is my Android section inside intelxdk.config.additions.xml

<platform name="android">
    <!-- below requires the splash screen plugin -->
    <!-- docs: https://github.com/apache/cordova-plugin-splashscreen -->
    <preference name="SplashMaintainAspectRatio" value="false" />
    <preference name="windowSoftInputMode" value="adjustPan" />
    <preference name="configChanges" value="orientation|keyboardHidden" />
    <preference name="loadUrlTimeoutValue" value="700000" />

I switched to use Intel XDK since it gives support for cordova/crosswalk

1. windowSoftInputMode = adjustPan means that the soft keyboard will not try to adjust the view size but part of the application will be obscured by the keyboard, so the user must minimize it to view hidden parts.

2. configChanges = orientation|keyboardHidden means that when a screen keyboard is opened or the screen is rotated, this setting will prevent android from reseting the current activity and you the developer must handle this change by yourself. http://stackoverflow.com/questions/7818717/why-not-use-always-androidconfigchanges-keyboardhiddenorientation

3. loadUrlTimeoutValue = 700000 tells android to wait 700000 milliseconds until application resources are loaded. http://stackoverflow.com/questions/12319809/application-error-the-connection-to-the-server-was-unsuccessful-file-andr

And I have this in my head tag inside index.html:

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

These are some hacks, if I find better solution I will post it.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...