Anyway to write a conditional; ONLY if Android Device and not Google Chrome then do something.
So, detect if Android (easy via below) but do something based on if Android and NOT google chrome; for instance do something for all Android users that are not using google chrome.
Any ideas if possible to add such a condition in similar format as below? (this works for detecting Android, I need to add condition for if Android and not Chrome > do something)
// var ua = navigator.userAgent.toLowerCase();
// var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
// if(isAndroid) {
// alert("Android!");
// }
And I found you can detect chrome with something like the below (no way to combine them?)
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
Related
I just want to check if the decive, which is using my website, is on a mobile or any other device. It's a quick question with a quick answer I hope.
If you are trying to see if the user's device is mobile, the MDN docs advises to look for the property maxTouchPoints in the navigator (or browser) object and see if the value is > 0.
In the past this used to be done with User Agent Sniffing (Read more here), i.e going through the user-agent header sent by the browser into the navigator.userAgent property to see if it contains certain keywords. This method however has limitations and may not always tell the right kind of device the user is on because many devices today support different browsers and features and vice versa.
Using User Agent Sniffing (Not recommended today, should be used only as a fallback)
var hasTouchScreen = false;
var UA = navigator.userAgent;
hasTouchScreen = (
/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
/\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
);
if (hasTouchScreen) {
// Device is likely mobile, so do stuff for mobile devices here.
}
Check using maxTouchPoints property and if > 0 in navigator object (MDN Docs Recommended)
var hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
hasTouchScreen = navigator.maxTouchPoints > 0;
}
if (hasTouchScreen) {
// Device is likely mobile, so do stuff for mobile devices here.
}
Be aware, that not all browsers may support that specification, so the navigator object may not have the property maxTouchPoints or some mobile devices may have large screens and some desktop devices may have small touch-screens or some people may use smart TVs and so on. So a better way to do this check would be to combine the snippet above with some fallbacks:
Better way to detect mobile devices using a combination of previous method and fallbacks (Most Robust Method, MDN Docs Recommended)
var hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
var mQ = window.matchMedia && matchMedia("(pointer:coarse)");
if (mQ && mQ.media === "(pointer:coarse)") {
hasTouchScreen = !!mQ.matches;
} else if ('orientation' in window) {
hasTouchScreen = true; // deprecated, but good fallback
} else {
// Only as a last resort, fall back to user agent sniffing
var UA = navigator.userAgent;
hasTouchScreen = (
/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
/\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
);
}
}
if (hasTouchScreen)
// Do something here.
}
Read more about browser detection using the user agent and the recommended way for mobile device detection here (For the recommended method for mobile device detection, look under the "Mobile device detection" subheading).
Just use this condition in javascript:
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)){
//do your stuff here
}
How can I reliably detect using javascript that a page is loaded inside a WKWebView? I'd like to be able to detect these scenarios:
iOS & WKWebView
iOS & Safari
not iOS
There is a similar question about UIWebView here. But it's quite old and I'm not sure if same still applies to WKWebView.
The accepted answer doesn't work as tested using the WKWebView vs UIWebView app
As the article mentions, the only HTML5 feature difference is IndexedDB support. So I'd go for a more reliable pattern with:
if (navigator.platform.substr(0,2) === 'iP'){
//iOS (iPhone, iPod or iPad)
var lte9 = /constructor/i.test(window.HTMLElement);
var nav = window.navigator, ua = nav.userAgent, idb = !!window.indexedDB;
if (ua.indexOf('Safari') !== -1 && ua.indexOf('Version') !== -1 && !nav.standalone){
//Safari (WKWebView/Nitro since 6+)
} else if ((!idb && lte9) || !window.statusbar.visible) {
//UIWebView
} else if ((window.webkit && window.webkit.messageHandlers) || !lte9 || idb){
//WKWebView
}
}
You may ask: Why not using the UserAgent? That's because Android browsers use it as settings! So, we should never trust any UAs. Only browser features and property checks as such.
Also I noticed that the QuickTime plugin was always loaded as part of Older Safari and other Browsers in UIWebView. But the plugin is no longer present in WKWebView. So you can use the QuickTime plugin presence as an extra check.
9/23/16 Edit: I adjusted the code for Safari 10 which no longer allowed the sole idb check to be reliable, as mentioned by #xmnboy. To discard Safari 10, it checks for the old webkit engine bug, which only applied until Safari 9.2; and i use a window.statusbar.visible fallback which appears to be a reliable indicator signal after a few comparison tests between iOS 9 and 10. (please check though)
Given the change in behavior to the UIWebView that was introduced by Apple in iOS 10, here's a new answer that combines the original response by #Justin-Michael and the follow-up favorite by #hexalys.
var isWKWebView = false ;
if( navigator.platform.substr(0,2) === 'iP' ) { // iOS detected
if( window.webkit && window.webkit.messageHandlers ) {
isWKWebView = true ;
}
}
It turns out that Justin's answer was really the better feature detection mechanism, because it works for both iOS 9 and iOS 10.
No telling what happens when we get to iOS 11. :-)
Qualification: this test will work if you are using the official Cordova WKWebView plugin to build your webview app, because that plugin does initialize the addScriptMessageHandler method, as noted by #hexalys in the comments to this post. That mechanism is being used by Cordova to define a new JS to native bridge when the WKWebView plugin is present.
Search for addScriptMessageHandler in that plugin repo and see the very end of the ios-wkwebview-exec.js file in that repo for some implementation details (or search for the string window.webkit.messageHandlers in that file).
In iOS, you could add this code to establish communication between javascript and objective-c:
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
WKUserContentController *controller = [[WKUserContentController alloc] init];
[controller addScriptMessageHandler:self name:#"javascript_observer"];
configuration.userContentController = controller;
...
webview = [[WKWebView alloc] initWithFrame:... configuration: configuration];
In javascript, you could test the connection like this:
if ( window.webkit != undefined ){
//javascript is running in webview
}
It seems that because the latest iOS Chrome uses WKWebView as a rendering engine, Chrome is detected as WKWebView.
ua.indexOf('CriOS') !== -1
will helps to distinguish Chrome from WKWebView in App.
You can check for the existence of window.webkit.messageHandlers which WKWebKit uses to receive messages from JavaScript. If it exists, you're inside a WKWebView.
That combined with a simple user agent check should do the trick:
var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
var isWKWebView = false;
if (window.webkit && window.webkit.messageHandlers) {
isWKWebView = true;
}
I am trying to detect if the user is navigating my website from safari browser on the iphone using jquery / javascript.
I am able to detect the IOS Environment using the user agent string
/iphone/i.test(navigator.userAgent.toLowerCase())
But this detects the Apple Webkit Environment i.e. it is same for all the browsers on the device. Can anyone suggest any different approach.
UPDATED:
Try this, for detecting Safari browser in an iPhone:
var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
It identifies Safari 3.0+ and distinguishes it from Chrome.
JsFiddle
Since the other answer doesn't include detection of an iPhone, including that part.
var isIphone = /(iPhone)/i.test(navigator.userAgent);
var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
if(isIphone && isSafari){
//do something
}
If you want to detect a particular iOS version and above, say iOS 7.0 and above then you can use the below code. It detects iOS version 7-19(for upcoming versions).
var isIphone= /(iPhone)*(OS ([7-9]|1[0-9])_)/i.test(navigator.userAgent);
var isFirefox = navigator.userAgent.indexOf("FxiOS") != -1;
var isChrome = navigator.userAgent.indexOf("CriOS") != -1;
var isEdge = navigator.userAgent.indexOf("EdgiOS") != -1;
var isOpera = navigator.userAgent.indexOf("OPT") != -1;
if (!isFirefox && !isChrome && !isEdge && !isOpera){
console.log("Only display in Safari")
} else {
console.log("Only display in Firefox/Chrome/Edge/Opera")
}
Hi, this way worked for me to detect only safari in ios mobile. The value FxiOs, CriOs, etc, I get from the userAgent value.
I have built a parallax intro for a clients site - due to the limited budget the animation will only work on higher end browsers, IOS and ie9.
Therefore I need to create a detection script in the sites homepage which will detect the following
IF:
ie9/ firefox / chrome/ safari - stay on current site
IOS - Go to IOS version
Android - Skip to main site
IE8 and below - skip to main site
I have carried out 'is mobile' detections in the past with PHP - but the above is pretty specific so I'm not sure how to approach it.. The main site is aspx, so I could make the animation page into a aspx page also and use server side detection, or look at Javascript/jquery options or plugins - or a combination of both..?
Can anyone recommend a good solution?
In hopes of not getting into browser detection / feauture detection argument blah blah blah, http://www.quirksmode.org/js/detect.html has a good script to handle this
Try with following code, uses the navigator object::
var ua = navigator.userAgent;
if(navigator.appName == "Netscape"){ //for Firefox, Safari and Chrome
//do nothing, stay on this page.
return;
}
else if(navigator.appName == 'Microsoft Internet Explorer'){
//check for version
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null){
version = parseFloat( RegExp.$1 );
}
if(version >= 9.0){
//do nothing, stay on this page.
return;
}
else{
//redirect to the site for lower IE versions.
}
}
else if(ua.match(/Android/i)){
//code for skipping to Android version
}
else if(ua.match(/iPhone/i)){
//code for skipping to iPhone version
}
else if(ua.match(/iPad/i)){
//code for skipping to iPad version
}
there is a JQuery object $.browser which could give you what you need in javascript here is the api call.
On the Server Side there is a .net Request.Browser object also here is the MSDN Api for it.
it's easy to detect the Android device, but I am having trouble detecting ONLY the Android native browser. Problem is the Dolphin browser has an almost identical user-agent string, and I'd like a way to know if they are using the native browser or not..
Is this possible?
you simply need to test a few parts of the user agent string in order to make sure you have the default android browser:
var nua = navigator.userAgent;
var is_android = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1);
you can use the following to ensure that you do not match chrome within android, although on a lot of devices now, chrome is being used as the default browser.
var nua = navigator.userAgent;
var is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));
EDIT:
If you want to protect against case sensitivity, you can use the following:
var nua = navigator.userAgent.toLowerCase();
var is_android = ((nua.indexOf('mozilla/5.0') > -1 && nua.indexOf('android ') > -1 && nua.indexOf('applewebkit') > -1) && !(nua.indexOf('chrome') > -1));
I think you are searching for this:
Android native browser not updated above version 534.30 so you can filter to the version and
Android UA string combination (above we can presume its a Chrome browser)
Here's my sample JavaScript code:
(If you need specific styling I would add a class to the body with the following JS snippet)
var defectAndroid = $window.navigator && $window.navigator.userAgent.indexOf('534.30') > 0 && $window.navigator.userAgent.toLowerCase().match(/android/);
if (defectAndroid) {
// sample code specific for your Android Stock browser
}
(Some Android devices reporting 'android' that's why we need the lower case conversation)
On a Galaxy S3, I found that both Chrome and the native browser had 'AppleWebkit' so I took that piece out of my conditional statement. I also added Version as that only appears in the native browser is seems. It works for me as
var ua = navigator.userAgent;
var isAndroidNative = ((ua.indexOf('Mozilla/5.0') > -1) && (ua.indexOf('Android') > -1) && !(ua.indexOf('Chrome') > -1) && (ua.indexOf('Version') > -1))
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';
}
You can do this with Javascript and the useragent feature. What u need to do is to make 2 If-requests:
First you detect the device type:
If android, ios, mobile, ipad, iphone
Take this setting
Now you make as much as u need if-requests or a case-request to detect the type of browser
If chrome, firefox, safari and so on
Take this setting
Thats it in the theory :)