in this code, i have tried to detect android browser and then redirect to another page. Its working fine in all mobile browser except “uc browser “ what will be code I have to add in this
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid)
{
if (window.confirm("hi !!"))
{
window.location.href = "www.google.com"
}
}
Related
The redirect at the end of the snippet works on Desktop machine but not on Mobile Phone (Android device)
var ajax1 = XMLHttpRequest();
var sigData = encodeURIComponent(canvas.toDataURL("image/png"));
ajax1.open("POST", './post.php');
ajax1.send(sigText.innerHTML);
$('#debug').html(canvas);
document.location.href='step2.php?xidx="+xidx+"';
I develop apps for Android/iOS using Cordova/Phonegap. I generally use a single code base for my web and mobile content. I use a SQLite database and/or other native plugins when it is a mobile app and have to avoid those LOCs when I'm on web.
But I'm facing a problem identifying whether my app is being run on a web browser on Desktop/Mac/Android/iOS or as a mobile app (Android/iOS).
I have tried userAgent sniffing, but this regex technique fails especially when running the code on mobile browsers. Following is the code I used to identify OS and version of the device:
getOSAndVersion: function() {
var that = this;
var userOS; // will either be iOS, Android or unknown
var userOSver; // this is a string, used to denote OS version
var ua = navigator.userAgent;
var uaindex;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua)) {
window.deviceType = "Mobile";
} else {
window.deviceType = "Web";
}
// determine OS
if (ua.match(/iPad/i) || ua.match(/iPhone/i)) {
userOS = 'iOS';
uaindex = ua.indexOf('OS ');
}
else if (ua.match(/Android/i)) {
userOS = 'Android';
uaindex = ua.indexOf('Android ');
}
else {
userOS = 'unknown';
}
// determine version
if (userOS === 'iOS' && uaindex > -1) {
userOSver = ua.substr(uaindex + 3, 3).replace('_', '.');
}
else if (userOS === 'Android' && uaindex > -1) {
userOSver = ua.substr(uaindex + 8, 3);
}
else {
userOSver = 'unknown';
}
return { osVersion: userOSver, os: userOS, deviceType: window.deviceType };
}
Is there any other technique I can use to reliably identify where my code is being run?
P.S. : I'm averse to using any other Cordova/JS plugin to identify it but still open for discussion.
In Cordova when app is runing into app the url is prefixed by file:// and when running in mobile browser the url is prefixed with http or https protocal.
Solution :
Get url of you current page (check this)
Identify its prefix if file:// the its app
If http or https then mobile browser
You could just check if cordova is defined?
if (cordova) {
// Running in your app
} else {
// Not running in your app, so website
}
Does anyone have further details on how this would be done to handle multiple devices. I would like to target iPhone, Android, and Windows devices. According to this article, you can use different links. Any thoughts on how 3 different links should be used around on single element?
http://habaneroconsulting.com/insights/opening-native-map-apps-from-the-mobile-browser#.VYg3-flVikp
I usually do this:
var isiOS = (navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod'));
var isAndroid = navigator.userAgent.match('Android');
var isWP = navigator.userAgent.match('Windows Phone') || navigator.userAgent.match('IEMobile');
if (isiOS){
setTimeout(function () { window.location = siteURL; }, 25); //fall back url
$('body').append('<iframe style="visibility: hidden;" src="'+ appURI +'" />');
} else if ((isAndroid) || (isWP)){
setTimeout(function () { window.location = siteURL; }, 25); //fall back url
window.location = appURI;
} else { // if (isOtherPlatform)
window.location = siteURL;
}
Note that on iOS, you can not determine if user has the map app installed or not. If you navigate to an app which the user has not installed would result in an ugly message complaining the absent of the target app. The workaround is to open that deep link in the iframe.
Also note that you should always redirect users to the web version of maps after some seconds to provide a smooth flow.
This is weird. I tried to pick up an image to preview it in a div using the HTML5 FileReader.readAsDataURL() function and a inline-image. This works fine on most browsers incl. iPhone's Safari.
But if I'm using the standard Android browser on a Samsung Nexus AND pick a photo which is stored on the phone I alwas get a width of 10810px and a height of 4286px regardless of which size the source image has, when I use a picture directly by taking a new photo it works. I get the correct sizes. :# I tried naturalWitdh, width, using jQUery and native javascript. All with same results
$('#file-input').change(function () {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var files = this.files ? this.files : this.currentTarget.files;
if (files && files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#picture')
.attr('src', e.target.result).attr('style', '')
.load(function () {
console.log('w:' + $(this).width());
});
};
reader.readAsDataURL(files[0]);
}
} else {
alert('an error message');
}
});
Have you tried hooking chrome up to your computer's chrome to see if the image and or divs are doing anything funky?
I had the same problem and found a solution for android (browser) 4.0 and up.
I found that it works correctly if you use the createObjectURL function to do something like the following:
function getImgSize(input) {
if (input.files && input.files[0]) {
var apiURL = (window.createObjectURL && window)
|| (window.URL && URL.revokeObjectURL && URL)
|| (window.webkitURL && webkitURL);
var url = apiURL.createObjectURL(input.files[0]);
$('#testImg').attr('src', url);
}
}
$('#testImg').on('load',function(){
alert($(this).width()+'*'+$(this).height());
});
$("input").change(function(){
getImgSize(this);
});
See http://jsfiddle.net/bravoman/qm2C5/5/ for a full example and use http://jsfiddle.net/bravoman/qm2C5/5/embedded/result/ to test it on your device/emulator.
Everything is working when open it with Opera mobile and Firefox, but when I open it with Android browser, the function not working. How to fix it?
$(document).ready(function(){
var price = document.getElementsByClassName('harga')[0];
var tax = document.getElementsByClassName('dp_per')[0];
var taxAmount = document.getElementsByClassName('dp')[0];
tax.onblur = function() {
taxAmount.value = parseFloat(price.value) * parseFloat(tax.value) / 100;
}
})(jQuery);
Here is what I've made:
http://jsfiddle.net/mYEUP/