Detecting Android (not chrome) with javascript? - javascript

I've found plenty of answers on this. The one I'm trying now is:
/(android)/i.test(navigator.userAgent)
But in Chrome on Windows I get true. I'm trying to detect when my user is on an Android device (to point them to the Play Store listing). Is there any reliable way to achieve this?

I just tried this answer, and the code worked for me: Detect Android phone via Javascript / jQuery
Here is their code:
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
// Do something!
// Redirect to Android-site?
window.location = 'http://android.davidwalsh.name';
}
I also made a CodePen here where you can test it out.
I tested my CodePen on Chrome for Windows, Chrome for Mac, and Chrome for Android, and it worked correctly for all.

Related

How open link in safari mobile app from webview

There are many topics of this here, but they all need native code interaction to work.
In my case, it is necessary to be able to do it directly from the url, without any interaction with my mobile app.
I tried:
Open Google in Safari
and
Open
and based in this post.
<script>
$(document).on('click', 'a[target="_blank"]', function (ev) {
var url;
ev.preventDefault();
url = $(this).attr('href');
window.open(url, '_system');
});
</script>
but nothing works.
Anyone have any idea how to fix this?
There is a trick. We know iOS Safari have these available URL Schemes:
(HTTP) — http://websiteurl
(HTTPS) — https://websiteurl
x-web-search://
(FTP) — ftp://locationtofileonftpserver
If you use Click here or window.open("http://somewebsite"). It always use current browser to open url.
x-web-search://?[keyword] - It will switch into Safari app but search for the keyword
Luckily we still have ftp:// left. It will switch to Safari app. But first you need to setup a public folder in your hosting & create a bridge html file to redirect user back to http:
ftp://{youripaddress}/bridge.html
window.open("https://yoururl", "_self");
Now you can open your website in the default Safari app from any browsers.
The original answer is here: JS - Mobile - Open Safari from any browser
Update (2021-01):
Apple seems to fix this on iOS, this is no longer work!
If this is running in safari it should comply with safari async call restrictions regarding popups as explained here.
You should fix your code so that the window open will be outside the function, Something like that:
<script>
var windowReference = window.open();
$(document).on('click', 'a[target="_blank"]', function (ev) {
var url;
ev.preventDefault();
url = $(this).attr('href');
windowReference.location = url;
});
</script>
There isn't a URL Scheme for Safari on iOS.
See Apple's Documentation:
https://developer.apple.com/library/archive/featuredarticles/iPhoneURLScheme_Reference/Introduction/Introduction.html
Have a search around and you will see similar answers:
What is Mobile Safari's custom URL Scheme?

document.getElementById working differently on iPad Safari?

I'm getting completely different behaviors in mobile Safari on the iPhone versus the iPad, both on actual hardware and in the iOS simulator, for document.getElementById.
This works on mobile and desktop but not on the iPad:
var foo = document.getElementById('foo');
foo.innerHTML = 'bar';
Actually, setting foo.[anything] isn't working on the iPad.
Website: https://davero.com/order2
Banging my head bloody. All help will be appreciated.
Are you using safari on the desktop to? Safari has had a problem before where it will return null or undefined back instead of the object.
Try using jQuery instead which would look like $('foo');
It would also be really helpful if you could post your code or atleast where you tagged foo and your script.

Calling function if mobile

I'm completely lost when it comes to jQuery/Javascript so apologies in advance. I'm using the MixItUp jQuery filter on a Wordpress site which has the option to show either grid or list view (default), what I'd like to do is set grid as default when visiting the site using a mobile device.
This is what I have at the moment (I've been copying and pasting from around the web so probably not even close):
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$(document).ready(function(){
$('#Grid').mixitup('toGrid');
});
Any help on this issue would be highly appreciated!
I have messed with detecting if a device is mobile or not a lot in the past and I have found it to be much easier to detect if it is not a mobile device versus detecting if it is a mobile device.
I like the searches you are doing, but you are missing a few like the Nook and Kindle a lot of mobile devices also use the word "mobile" in their user agent. With that said even if you include these in your search you will surely have more that pop up over the next few years. I have found it to be better to detect if it is a desktop or not because there are not new desktop operating systems being added on almost a yearly basis like we are seeing with mobile devices these days. Not only that but I have also found that older Android devices can return mixed results in their user agents.
Here is the bit of code we use to figure out if the device is Windows, Linux, Mac, Facebook, a bot, or a mobile device. We have used and tested this code a lot with all the different devices we have vising our site and it appears to be working correctly for all devices. I hope this helps!
$(document).ready(function(){
if (deviceType() == "Mobile")
$('#Grid').mixitup('toGrid');
});
function deviceType ()
{
var OSName="Mobile";
if (navigator.appVersion.indexOf("Win")!=-1 && navigator.appVersion.indexOf("Phone")===-1) OSName="Windows";
if (navigator.appVersion.indexOf("Macintosh")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1 && navigator.appVersion.indexOf("Android")===-1) OSName="Linux";
if (navigator.appVersion.indexOf("facebook.com")!=-1) OSName="facebook";
if (navigator.appVersion.indexOf("bot")!=-1) OSName="bot";
if (navigator.appVersion.indexOf("Slerp")!=-1) OSName="bot";
return OSName;
}
You want to wrap the "if" statement and function call inside the document ready call. Not the other way around:
$(document).ready(function () {
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)) {
$('#Grid').mixitup({layoutMode : 'grid'});
}
});

Mouse click and mouse over effect for turn.js not working

I was working upon a website with a flipbook kind of jQuery effect provided by turn.js.
It was working very well on my development environment. Suddenly have found out that the mouseover effect and mouseclick has stopped working on browser Chrome V29.0.1547.66m.
It works perfectly with V26.0.1410.63 and on other browsers (Firefox).
Need to know the reason and some workaround solution for the same.
Here is the link to my webpage.
I had checked your link, I think there is some problem in turn.min.js script. Use turn.js script in place of turn.min.js it is working fine on your link.
As per issue no 399 posted on blasten/github https://github.com/blasten/turn.js/issues/399 change your turn.min.js to latest version of turn.js. This will surely solve your issue with chrome browsers' latest version on windows.
helloi was using the unminified version of turnjs and still had problems with some browsers, i read the code and discovered that mouse move events were not dispatched
i tested with 2 computers :
old Toshiba laptop with 1st-gen i7, Windows 7 Pro SP1, Opera 35.0.2066.68, Firefox 44.0.2 64Bits
brand new Intel NUC5i7RYH, Windows 8.1 Pro, same browser versions
mouse events
working properly on NUC + Firefox and Toshiba + Opera
NOT working on NUC + Opera and Toshiba + Firefox
uh ?
mouse || touch callbacks are set at line 28
touch capacity is detected at line 26
the isTouch test at line 26 returns true on some desktop browsers, which causes the mouse controls not to work
i noticed many tests provided on forum an blog posts didn't detect touch capacity properly, because they often check if touch APIs exist, which seems to be true in some Opera and Firefox browsers (i read some posts about people having the same problem with Chrome, mine works well)
i ended up using this test, which is far from perfect but does the job for now :
!(window.screenX != 0) && ('ontouchstart' in window || 'onmsgesturechange' in window);
i have no more problems, but this solution should be tested on many devices and the isTouch test must be improved
also, i got a bug in the zoom (line 90) while using latest version of jQuery, which i fixed by unchaining the two listeners as follows :
this.mousedown(zoomMethods._mousedown); // what ? chaining bug ?
this.click(zoomMethods._tap);

Simple way to check whether user is mobile device?

I'm looking to create a simple redirect on my homepage for users of major mobile OS (at least Android, Nokia/Symbian, Windows, iOS and Blackberry OS).
At present I have it working for iPhone / iPod (see below), but I'm wondering whether there's a simple way in javascript to check for all. (As opposed to just writing out a big ol list of mobile userAgents).
Perhaps something that detects screensize?
// Current Code
<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://m.domain.co.nz";
}
}
</script>
This properly done on the server, not on the client.

Categories

Resources