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>
Related
Looking to hide/show a component in a React/Nextjs/tailwind webapp depending on the device that the user is on (e.g. desktop vs tablet vs mobile) since there are certain keys on the keyboard available for desktop but not on table and mobile (e.g. the tab key). Don't want to do it by screen size since this is a device problem (no tab on keyboard) rather than a screen size problem
Initially I thought about getting device type (code referenced from another stackoverflow Q/A), but this seems to fail when the user is on a device such as an ipad and is using the Desktop version for that browser (e.g. Desktop safari and not mobile safari). Is there a better way to handle this such that it can properly check what device the user is on in order to be able to hide/show the react component?
const getDeviceType = () => {
const ua = navigator.userAgent;
if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
return "tablet";
}
if (
/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(
ua
)
) {
return "mobile";
}
return "desktop";
};
In JavaScript you can detect browser with JavaScript using window.navigator
Code example according to https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator would be
var sBrowser, sUsrAg =
navigator.userAgent;
// The order matters here, and this may
report false positives for unlisted
browsers.
if (sUsrAg.indexOf("Firefox") > -1) {
sBrowser = "Mozilla Firefox";
// "Mozilla/5.0 (X11; Ubuntu; Linux
x86_64; rv:61.0) Gecko/20100101
Firefox/61.0"
}
alert("You are using: " + sBrowser);
But for react there's another package you can use that is npm install react-device-detect
Code example would be
import { browserName, browserVersion }
from "react-device-detect"
console.log(`${browserName}
${browserVersion}`);
After detecting browser you just conditionally render whatever you want to show
Chrome DevTools has the option to use the device emulation mode.
I know there's a way to test whether the mode is on or not. But I'd like to know when it's being activated or deactivated, on click.
Are there any events I could listen to, fired by the browser, that indicate the mode was turned on or off?
I ended up doing this:
$(window).on('orientationchange', function(e) {
if (e.tagret && e.target.devicePixelRatio > 1) {
// Emulation mode activated
} else {
// Emulation mode deactivated
}
});
Works for Google Chrome (my version: 58.0). Is it the bulletproof way? Not sure. It's enough for my needs, though.
orientationchange docs here.
My solution:
$(window).on('orientationchange', function(e) {
setTimeout(function() {
var emulationModeActivated = window.navigator.userAgent.indexOf('Mobile') !== -1;
}, 0);
});
Chrome adds Mobile to userAgent in device emulation mode, for example "Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.75 Mobile/14E5239e Safari/602.1"
e.target.devicePixelRatio isn't usable on Mac with Retina Display as value is always > 1
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();
}
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.
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 :)