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 :)
Related
We were able to detect an iPad device using javascript like this:
function isDeviceiPad(){
return navigator.platform.match(/iPad/i);
}
That worked perfectly in detecting iPad devices, but when we checked from an iPad Pro (10.5 inch), it does not detect that it is an iPad.
To further investigate, we drilled down into the navigator object, checked both platform and userAgent, and got these results:
navigator.platform = 'MacIntel';
navigator.userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15)
AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15)';
The issue is that navigator.platform = 'MacIntel' (which is the same as the MacBook Pro) is returned instead of the iPad. We need a way to detect that this is an iPad and not a MacBook Pro, but it seems that the navigator does not return iPad like it does with older iPads.
Any idea how we can fix this issue?
iPadPro reports navigator.platform the browser as 'MacIntel', but that is the same as other platforms.
Currently (2019) difference between iPadPro and the other platforms is that iPadPro is touch enabled.
Here are a couple of helpful methods.
function isIOS() {
if (/iPad|iPhone|iPod/.test(navigator.platform)) {
return true;
} else {
return navigator.maxTouchPoints &&
navigator.maxTouchPoints > 2 &&
/MacIntel/.test(navigator.platform);
}
}
function isIpadOS() {
return navigator.maxTouchPoints &&
navigator.maxTouchPoints > 2 &&
/MacIntel/.test(navigator.platform);
}
I guess that iPad Pro is upgraded to iPadOS 13 Beta. Since Apple claimed Desktop-Class Browsing with Safari on iPadOS, it seems mobile Safari also mimics macOS behavior and user agent.
So, the short answer is it's not possible.
However you can try workarounds from answers to this question.
Currently, in October 2020 the only way I know is:
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 0) || navigator.platform === 'iPad'
You can use Regular Expression for this.
var isIPadPro = /Macintosh/.test(navigator.userAgent) && 'ontouchend' in document;
You may use screen size to check it, iPad pro came with 2 different side.
Detail implement bellow, modify it as your use case
function isIpadPro() {
var ratio = window.devicePixelRatio || 1;
var screen = {
width : window.screen.width * ratio,
height : window.screen.height * ratio
};
return (screen.width === 2048 && screen.height === 2732) || (screen.width === 2732 && screen.height === 2048) || (screen.width === 1536 && screen.height === 2048) || (screen.width === 2048 && screen.height === 1536);
}
Screen size reference: http://screensiz.es/
The most easiest way to detect an "iPad Pro 10.5" device is through checking its screen size which is "window.screen.height x window.screen.width = 1112 x 834"
However, I am wondering why you need to detect the device model. In case you want to detect mobile browsers, take a look at this question: Detecting Mobile Browser
You should be able to use the screen size to distinguish them. Thought you will need to find the real value for each iPad pro you want to detect.
window.screen.height
window.screen.width
Capacitor has a useful web plugin to get device info (https://capacitor.ionicframework.com/docs/apis/device#example).
It does not differentiate between iPad Pro and regular iPad, but then you could combine the use of this plugin with the screen size solutions proposed.
If you'd like to do this yourself, you can take a look at the code here: https://github.com/ionic-team/capacitor/blob/master/core/src/web/device.ts
It is possible.
You can use this function.
This will also check a mac with a touch device (iPad 13).
<script type="text/javascript">
if(iOS()){
alert('iOS');
}
function iOS() {
return [
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod'
].includes(navigator.platform)
// iPad on iOS 13 detection
||
(navigator.userAgent.includes("Mac") && "ontouchend" in document)
}
</script>
I have a script that will detect iPhone/iPad and Android devices, but having trouble singling out Desktop/Laptop devices. When viewing the page on an iPhone/iPad, it triggers an alert for "iDevice" first, then an alert for "Desktop". I need to be able to show a different form, based on what platform the user is viewing the page on (iPhone/iPad, Android, Windows Phone, Desktop/Laptop (non mobile devices)). I'm not trying to target resolution, I'm trying to target PLATFORM.
HTML
<div class="iDevice">iDevice</div>
<div class="android-view">Android Device</div>
<div class="desktop">Desktop</div>
Javascript
$("#email").hide();
$(".desktop").hide();
$(".iDevice").hide();
$(".android-device").hide();
$('#checkbox').change(function () {
$('#email').slideToggle();
});
if((navigator.platform === 'iPhone') || (navigator.platform === 'iPad')){
alert("iDevice");
$(".iDevice").show();
$(".android-view").hide();
$(".desktop").hide();
}
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
alert("Android");
$(".iDevice").hide();
$(".android-view").show();
$(".desktop").hide();
}
else if ((navigator.platform != 'iPhone') || (navigator.platform != 'iPad' ) || (isAndroid === false)){
alert("Desktop");
$(".desktop").show();
$(".iDevice").hide();
$(".android-view").hide();
}
JSFIDDLE: LINK
Unless you have a specific need to show content based directly on the device, you should practice Responsive Design. The idea is to style your content for different screen sizes, layouts, or whatever, with CSS and, if need be, Media Queries. Additionally, if you need to have your JavaScript perform different actions based on API availability, you should use a Feature Detection library such as has.js or Modernizr.
That being said though, if you still want to pursue displaying content based on device, one glaring problem that I can see is that your if statements are incorrect:
if (navigator.platform === 'iPhone' || 'iPad'){} resolves to 'iPad' which is truthy.
You need to use a compound if statement like:
if ((navigator.platform === 'iPhone') || ((navigator.platform === 'iPad')){}
This goes for all of your other if statements as well.
Another alternative is to use a regex.test() as was done in another question: Detect if device is iOS.
Additionally, trying to navigate the mess that is the userAgent string will drive you mad. Consider reading WebAim's History of the browser user-agent string in order to see why. I mean, unless you enjoy manhandling all the different user agent strings that Microsoft Internet Explorer has put out in order to trick servers into thinking that it isn't actually IE.
I reworked my logic, and was able to separate the forms with the following mix of targeting navigator.platform and navigator.userAgent:
$("#email").hide();
$(".iDevice").hide();
$(".android-device").hide();
$('#checkbox').change(function () {
$('#email').slideToggle();
});
//IF WINDOWS PHONE
if(navigator.userAgent.match("MSIE")){
$(".iDevice").hide();
$(".android-view").show();
$(".desktop").hide();
}
//ELSE IF iPhone/iPad
else if((navigator.platform === 'iPhone') || (navigator.platform === 'iPad')){
$(".iDevice").show();
$(".android-view").hide();
$(".desktop").hide();
}
//ELSE IF DESKTOP (NOT iPhone/iPad/Android/Windows Phone)
else if ((!navigator.userAgent.match("MSIE")) || (navigator.platform !== 'iPhone' || 'iPad' ) && isAndroid === false){
$(".desktop").show();
$(".iDevice").hide();
$(".android-view").hide();
}
//IF IS ANDROID
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
$(".iDevice").hide();
$(".android-view").show();
$(".desktop").hide();
}
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;
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.
We have a chat program that works with only a couple of browsers right now. So, I'm inserting a user agent redirect to manage the messaging to inform the user why they can't chat with their unsupported browser.
The issue I'm having is only Firefox 3.1 and under, for example, is supported for FireFox., but my custom script below is enabling all Firefox versions compatible. What's the solution to have only Firefox 3.1 be compatible?
Note: I don't plan to send them to the actual browser websites as seen in my example. I just put those URLs in for example purposes only. I plan to have custom redirect pages with friendly messaging on them...
Demo of existing code:
http://jsfiddle.net/evanmoore/4xr77/
Code is below:
<script type="text/javascript">
if ((navigator.userAgent.indexOf('Firefox') != -1) || (navigator.userAgent.indexOf('MSIE') != -1))
{
// Your browser is supported for live chat
document.location = "http://www.livechatinc.com/";
}
else if(navigator.userAgent.indexOf("Safari") != -1)
{
// Your Safari browser is not supported for live chat
window.location = "http://www.apple.com";
}
else if(navigator.userAgent.indexOf("Chrome") != -1)
{
// Your Chrome browser is not supported for live chat
window.location = "http://www.google.com/chrome";
}
else
{ // All others... Your browser is not supported for live chat
window.location = "http://www.gofetch.com";
}
</script>
Based on Asad's comment, I found the different browser strings here which gave me the ability to control the version number like so... I think this should do the trick!
if ((navigator.userAgent.indexOf('Firefox/3.1') != -1)
Try checking if the functionality exists, not the version of the browser.
e.g. if (typeof foo != 'undefined') will check if foo exists
You can find more info here