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
}
Related
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.
As the title says. Here is the URL if you have an iPad - How can I remove the responsive width of the Comments Plugin for iPads? (bottom of page) http://dev.assessmentday.co.uk/aptitudetests_numerical.htm
I ran into this too. I've worked around it by manually adding the data-mobile attribute set to false if I detect this is on an iPad:
<script>
if (navigator.userAgent.match(/\biPad\b/)) {
document.querySelector('div.fb-comments')
.setAttribute('data-mobile', 'false');
}
</script>
This could be improved to handle other tablets as well, but the best way to do that depends on how Facebook auto-detects "mobile", which I'm not sure of. Perhaps based on display width, perhaps based on the presence of touch event handlers, or perhaps indeed by user-agent on the server-side.
Trying to write html help files that get included with our app on iOS.
For the iPad version, I want the help files to display a smallish graphic (about
156x204).
For iPhone / iPod, I don't want to have the graphic displayed.
Other than using javascript like the following in the file h_login.html:
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("h_small_login.html");
which requires a clone of each file, I haven't found a method.
Would prefer to stay using minimal HTML ... vanilla, no CSS, a single "meta" at the
start to specify:
meta name="viewport" content="width=device-width; initial-scale=1.5; maximum-scale=4.0; user-scalable=1;"
thanks!
Stan
By far the easiest way is with a media query. I'm fairly sure i-Devices support this feature of CSS:
#media screen and (max-device-width: 600px) {
img.hide {display:none;}
}
Just add class="hide" to the relevant images, and adjust the 600px (I don't know what the resolution of iPhone and iPad are, but just change the 600 to anything in between the two).
It is far easier to do this than to try and get JavaScript to do the same thing.
jQuery can do this easily:
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$("img").attr("display","none");
}
That would remove all images from the document when the useragent is iPhone or iPod. If you aren't using jQuery, but you are using server-side scripting, we'd need to know what language you are using. If you are just using straight HTML, then JavaScript is your only way to modify the page, and jQuery will be your best bet.
as you know the Mail app in iOS 5 have a rich text editor is there any possible way to use this feature for a regular UITextView ?
I know of two fundamental approaches to creating a rich text editor in iOS 5:
Use Core Text and a custom view. I don't have any experience with this approach.
Use a UIWebView (instead of a UITextView) and the contentEditable HTML attribute. The basic idea is to load a custom HTML document from your app resources directory. The bare minimum that it needs is this:
<div contentEditable>TEXT_PLACEHOLDER</div>
To initialize the rich text editor view:
1. Load the contents of this file into an NSMutableString and replace the TEXT_PLACEHOLDER string with the text you want to edit.
2. Send the loadHTMLString:baseURL: message to the UIWebView with that HTML string.
Now you have a UIWebView displaying your text inside a div with contentEditable. At this point, you should be able to run your app tap on the text, and be presented with a cursor and be able to add/remove text. The next step is to add rich text formatting functionality. This is done with a set of simple javascript function calls. See the Mozilla documentation on contentEditable for a great reference. You will also want to add a Javascript function to your HTML template file like this:
function getHtmlContent() { return document.getElementById('myDiv').innerHTML; }
So you can easily retrieve the edited text as HTML using [myWebView stringByEvaluatingJavaScriptFromString:#"getHtmlContent()"]. You can also add custom context menu items like you show in the screen shot in your question.
If you have access to the Apple iOS dev center, the WWDC session Rich Text Editing in Safari on iOS talks all about this approach.
A variation of this approach is to use a third-party rich text editor like TinyMCE. I've heard of some success with integrating this into a UIWebView in iOS 5. Again this relies on the contentEditable attribute.
Here is my implementation. Still haven't added UIMenuController functionality, but it's planned to be added soon.
https://github.com/aryaxt/iOS-Rich-Text-Editor
The iOS 5 rich text edit control is also present in the notes app in iOS 4 (make a rich text note on the computer and sync it to see).
This is a custom Apple-made control which they use in their own apps, but it is not published in any official developer API. It's probably in the SDK somewhere, but because it is undocumented, even if you find it and use it, Apple will reject your app.
Basically, if you want a rich text control you will have to make your own.
Edit: Try using this: https://github.com/omnigroup/OmniGroup/tree/master/Frameworks/OmniUI/iPad/Examples/TextEditor/. I haven't used it, so I don't know how well it will work. (Link from this question)
look at https://github.com/gfthr/FastTextView which is more good open source editor than Omni editor
I have tried to disable phone number detection in safari for my web app but it still shows 7 character strings comprised of numbers as phone numbers. I used the apple provided meta tag but no joy.
<meta name="format-detection" content="telephone=no">
Anyone else run into this problem and work around it?
Thanks.
Update: It looks like it does not detect phone numbers in safari but rather when I save the page as an icon and run it from the home screen.
Are you loading this in a UIWebView? If so, you need to set the property for dataDetectorTypes. e.g:
webView.dataDetectorTypes = UIDataDetectorTypeNone
Valid detector types are here.
Search for UIWebView on apple's site for a description of how to set the property there.
-Kevin
We had a similar problem on our JQM/Cordova app. We had a calculator built into the app and whenever the amount was more than seven digits the data would be in blue with an underline underneath and when you click on the data a pop up appeared and gave you the option to call. We simply added
the meta tag as described in the opening question & it worked.
Just adding some thought here in case anybody else has a similar issue with Safari detecting 7 stringed data as telephone numbers.
OK. After quite a bit of futzing I think I found a strange work around. The problem with using dataDetectorTypes is that it will disable phone number detection for the whole uiwebveiw.
After trying datadetectors="off" and x-apple-data-detectors="false" attribute on span and a tags I finally stumbled on something that seems to prevent phone number detection.
If I wrap my text in an a tag with an href="#" apple seems to leave it alone.
Try this Code,
webView.dataDetectorTypes = UIDataDetectorTypeNone;
This may help you.
Try and add this to YourProjectAppDelegate.m
// ...
- (void)webViewDidStartLoad:(UIWebView *)theWebView
{
theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;
return [ super webViewDidStartLoad:theWebView ];
}
// ...
Did the trick for me..