Unity WebGL Mobile browser workaround and keyboard input fix? - unity3d

Hey everyone so I read that unity doesn't really support mobile browsers for WebGL games. im using 2020.1.4.And sure enough, the game gets a bit distorted by not being scaled properly. it's like the camera is bigger so it shows on the screen that blue color. I tried some things, setting width and height to auto or removing config.devicePixelRatio = 1; as suggested by a friend but nope! still looks horrible! And if that wasn't enough the keyboard doesn't show up when clicking on form fields. i tried this one
https://github.com/eforerog/keyboardMobileWebGLUnity
which displayed an error when pressed on and this one
https://github.com/dantasulisses/WebMobileInputFix which just didn't even compile!
Any ideas, please?

I did my research and tried every plugin I could find. I used Unity 2020.3.28f1 and tested both on Android-phone and iPhone.Here is my report.
These plugins don't work:
https://unitylist.com/p/f58/Unity-webgl-inputfield
https://github.com/eforerog/keyboardMobileWebGLUnity
https://github.com/dantasulisses/WebMobileInputFix
This plugin works, but you should use different settings for IOS and Android on same input field game object. If you use "prompt", it works for IOS only, and "overlay" works for Android only. Look for documentation in page:
https://github.com/unity3d-jp/WebGLNativeInputField
And this plugin works best at the moment. Yes, it is a bit ugly though, but it works.
https://github.com/kou-yeung/WebGLInput
And there is a fix for Unity 2021 for it:
https://github.com/kou-yeung/WebGLInput/releases/tag/1.0

There's a keyboard that overlays, when using it you just need to tap the notification to access it and then click the "back" button to hide it https://play.google.com/store/apps/details?id=com.fishstix.gameboard

I made this project that simply recreates a keyboard using buttons in unity.
I implemented it in a WebGL build successfully.
https://github.com/thetimeste/WebGL-Build-Keyboard-Unity.git

I would recommend using the native js window.prompt() fields as of writing. They have great cross-platform support, allow for extra features like special characters, emojis, copy and paste etc. and are pretty easy to set up. Once (or honestly if ever) Unity adds their own reliable implementation you can easily remove this lightweight implementation.
Create a .jslib file that has a function opening a window.prompt(description, currentText)
Return the result at the end of that function back to a unity object with a recipient script
Make a derivation from Unity's event system overwriting the OnApplicationFocus(bool focus) function (leaving it empty), to fix a sneaky Chrome Android bug.
That's it. The result should look something like in this demo: https://pop.demo.neoludic.games
If you want to save some development time on a feature that really should just be native in Unity, you can also check out my plugin based on the method above. https://neoludic-games.itch.io/pop-input

I also need to enable mobile virtual keyboard for running webgl on mobile device.
I've tried the code from your mentioned url. It gives you some idea on how to do
it, but the code are totally buggy and unusable. Now I am trying to implement it
by myself.

Related

navbar links dont appear iphone

so im in the process of developing my own website and understanding bootstrap. just recently uploaded the files to the free server and i see that everything that ive worked on its there and it looks just like i see it on my laptop, except of course for a few things that i cannot make work yet like : the position of logo on the navbar and links not being active when pressed. anyway when i checked on my phone to see how it looked like i couldnt see the links on the navbar, all i could see was a square with lines inside but when i touched it nothing appeared. so what should i do? am i missing a something?
Bootstrap has a mobile navigation built into it but it requires javascript. Ensure you have JS enabled and have included the collapse.js file:
http://getbootstrap.com/javascript/#collapse

mobile web app - keyboard not appearing

I have a mobile web application, working well on simulator 5.1/6.0, xcode 4.5 for iphone.
But when I test on a real device (3gs, ios 5.1), I get a strange behavior: anywhere I place an input field html element, where I need the user to fill in something, I tap the field, it gains focus (I see the cursor), but the touch-keyboard does not come up and I can't type anything. If I try it on the sim, all is fine, the kb comes up.
I am not sure how to diagnose this... tried googling for some answers, haven't found any :(
any ideas?
thanks...
ok found the issue, seems like the app was not created using the latest Xcode template (it is a legacy app), so I removed the MainWindowxxx.xibs which I don't need, and used the code from a new XCode app template to initialize the app by programmatically creating the main view controller, and setting it as the window's rootViewController. And, of course, call [self.window makeKeyAndVisible]

iphone detect new style sheet

I am trying to trouble shoot a css issue that is appearing only in iphone browsers. I simply need to detect if the user is using an iphone, and if so, render a modified version of the div that is being affected.
I am happy to just call this modified version of the css div in the header as it will save having a second style sheet.
You used to be able to do it between browsers. It was especially good when rendering a IE6 fix.
Thanks for your help in advanced.
James
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
// do something
}

In-app settings controlled by plist?

Is there a library or good tutorial which covers creating in-app settings, like this:
http://img.skitch.com/20090625-s8bf6ahybwe3cesd1id38h3nt.jpg
What I would like is if it:
doesn't use the built-in Settings app, and does not replicate it's settings in the Settings app
is controlled by a plist file with various Dictionaries and Arrays
creates a nice looking table view
allows edit-in-place text fields as well as switches and sliders and ticks etc
doesn't have any of the annoying problems I've come across when trying to build my own version (not scrolling to show the textfield, cells disappearing)
JUST TO EMPHASIZE: I DO NOT WANT THE SETTINGS TO APPEAR IN THE SETTINGS APP.
It would appear that the iphone dev world is crying out for such a thing.
THANK YOU!
InAppSettingsKit
I've used the open source project InAppSettings, and it works well.

Set textbox focus in mobile safari

Hey, I was wondering how to set the focus to a text box in Mobile Safari.
I've tried document.myForm.myTextArea.focus() which works in regular Safari, but it does not seem to work in Mobile Safari.
To clarify, I want to set focus to a text box as soon as the user loads a page, and have the iPhone keyboard pop up.
Just found this previous post stating this is a bug in webkit. Sorry for not doing a more thorough search.
http://discussion.forum.nokia.com/forum/showthread.php?t=127724
I found a bug report with the iUI project relating to this.
It seems that a focus() call will not work if called from the onload event or if called via a timer.
http://code.google.com/p/iui/issues/detail?id=129
Update: Although I have no source for this, I am told (by people who have tried it) that in iPhone OS 4 the problem with focus() and onload should be fixed.
Nothing to do with the timer, focus() doesnt work at all... im doing mine through an AJAX function. i guess my web application will have to suffer in mobile safari.
Bye the way, this also affects HP webOS devices and any other device using mobile safari