Sign in to follow this  
spinnerbox

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

Share this post


Link to post
Share on other sites

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" />
</platform>

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.