spinnerbox Posted May 27, 2016 Share Posted May 27, 2016 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 More sharing options...
spinnerbox Posted June 15, 2016 Author Share Posted June 15, 2016 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. Link to comment Share on other sites More sharing options...
Recommended Posts