How to detect device name in Safari on iOS 13 while it doesn't show the correct user agent?
Indeed, while option change in Settings may be a good solution for the user, as a developer you can't rely on that. It is as weird as to ask the user to not to use dark mode cause your app doesn't support it instead of opt-out of it using plist.
As for me, the most simple way to detect iOS / iPad OS device now:
let isIOS = /iPad|iPhone|iPod/.test(navigator.platform) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
The first condition is old-fashioned and works with previous versions,
while the second condition works for iPad OS 13 which now identifies itself as:
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko)"
which by all platform detectors I know is not detected (for now) neither as mobile nor desktop.
So since iPad OS now calls itself Macintosh, but real macs have no multi-touch support, this solution is ideal to detect iPad OS devices which are the only multi-touch "Macintosh" devices in existence.
P.S.
Also, you may want to augment this checkup for IE exclusion from being detected as an iOS device
let isIOS = (/iPad|iPhone|iPod/.test(navigator.platform) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
!window.MSStream
How to detect iOS 13 on JavaScript?
I would like to advice you against detecting operating system or browser from user agent, since they are susceptible to change more than an API for that does, till a reliable stable standard API lands. I have no idea about when this second part will happen.
However, I can suggest to detect feature instead if in this case it is applicable to you.
You can check if the anchor html element
supports download
attribute:
"download" in document.createElement("a") // true in supporting browsers false otherwise
That way you can display
the appropriate html markup depending on the output for each case.
Something like that may help:
function doesAnchorSupportDownload() {
return "download" in document.createElement("a")
}
// or in a more generalized way:
function doesSupport(element, attribute) {
return attribute in document.createElement(element)
}
document.addEventListener("DOMContentLoaded", event => {
if (doesAnchorSupportDownload()) {
anchor.setAttribute("display", "inline"); // your anchor with download element. originally display was none. can also be set to another value other than none.
} else {
image.setAttribute("display", "inline"); // your alone image element. originally display was none. can also be set to another value other than none.
}
});
For example, I use following to detect if I am on an ar quick look supporting browser on iOS:
function doesSupportAnchorRelAR() {
return document.createElement("a").relList.supports("ar");
}
You can also use techniques documented below:
http://diveinto.html5doctor.com/detect.html#techniques
Detect if device is iOS
Detecting iOS
With iOS 13 iPad both User agent and platform strings are changed and differentiating between iPad and MacOS seems possible, so all answers below needs to take that into account now.
This might be the shortest alternative that also covers iOS 13:
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)
}
iOS
will be either true
or false
Worse option: User agent sniffing
User Agent sniffing is more dangerous and problems appear often.
On iPad iOS 13, the user agent is identical with that of a MacOS 13 computer, but if you ignore iPads this might work still for a while:
var iOS = !window.MSStream && /iPad|iPhone|iPod/.test(navigator.userAgent); // fails on iPad iOS 13
The !window.MSStream
is to not incorrectly detect IE11, see here and here.
Note: Both navigator.userAgent
and navigator.platform
can be faked by the user or a browser extension.
Browser extensions to change userAgent or platform exist because websites use too heavy-handed detection and often disable some features even if the user's browser would otherwise be able to use that feature.
To de-escalate this conflict with users it's recommended to detect specifically for each case the exact features that your website needs. Then when the user gets a browser with the needed feature it will already work without additional code changes.
Detecting iOS version
The most common way of detecting the iOS version is by parsing it from the User Agent string. But there is also feature detection inference*;
We know for a fact that history API
was introduced in iOS4 - matchMedia API
in iOS5 - webAudio API
in iOS6 - WebSpeech API
in iOS7 and so on.
Note: The following code is not reliable and will break if any of these HTML5 features is deprecated in a newer iOS version. You have been warned!
function iOSversion() {
if (iOS) { // <-- Use the one here above
if (window.indexedDB) { return 'iOS 8 and up'; }
if (window.SpeechSynthesisUtterance) { return 'iOS 7'; }
if (window.webkitAudioContext) { return 'iOS 6'; }
if (window.matchMedia) { return 'iOS 5'; }
if (window.history && 'pushState' in window.history) { return 'iOS 4'; }
return 'iOS 3 or earlier';
}
return 'Not an iOS device';
}
Detect if the user is navigating through the safari mobile browser on iphone
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
How to detect if user is using an Apple device [Not only iOS] in PHP or Jquery
From Apple’s website:
if (window.ApplePaySession) {
// The Apple Pay JS API is available.
}
After doing that you can also detect if they have a at least one card provisioned using canMakePaymentsWithActiveCard
Related Topics
Bootstrap Switch Checked Event
How to Save an Image with CSS Filter Applied
Detect Scale Settings (Dpi) with JavaScript or CSS
How to Organize Minification and Packaging of CSS and Js Files to Speed Up Website
Change Header CSS Upon Scrolling Down
Ios: Disable Bounce Scroll But Allow Normal Scrolling
Jqm Ui-Content 100% Height Issue
Make the Change of "Active" Class in the Menu More Reliable When Scrolling
JavaScript Keypress Event Not Raised on Android Browser
Dynamically Modify Webkit Animation with JavaScript
Build JavaScript Object to Use with Jquery .Css() (What About Duplicate Keys)
Jquery Tablesorter CSS Arrow Icons
Detect Android Phone via JavaScript/Jquery
How to Get Default Font Size in Pixels by Using JavaScript or Jquery
JavaScript Style Property Is Empty