I need to determine whether a user has accessed the application through a browser on Android or iOS. The company would like to display slightly different content depending on the platform. While I am aware that navigator.platform can be used for this purpose, it is worth noting that navigator.platform has been deprecated by Mozilla. As we approach 2022, what alternative method should be implemented for detecting Android and iOS?
As per MDN, the recommended method is to utilize navigator.userAgentData.platform, however, the drawback of this approach lies in its lack of support from FireFox, Safari, Android Browser, or Chrome on Android.
An alternative suggestion to the [navigator.platform] property is to use
navigator.userAgentData.platform. Nevertheless, some major browsers have not yet implemented support fornavigator.userAgentData.platform, and the specific definition remains unrecognized by any standards group (specifically, it does not form part of any published specification by the W3C or WHATWG).
For now at least, opting for navigator.userAgent appears to be a reasonable choice. It currently enjoys support from all leading browsers; nonetheless, browser manufacturers may modify the content provided without prior notice, thus necessitating caution.
The specification urges browsers to limit the information disclosed through this field. It is unwise to presume that the value attached to this property will remain constant across future browser versions. Ideally, refrain from using it altogether, or restrict usage to current and past browser versions. There exists a likelihood of new browsers adopting the same UA, or parts thereof, as an older browser - casting doubt on the authenticity of the browser agent portrayed through this property.
Further, bear in mind that users hold the liberty to alter the contents of this field if desired (UA spoofing).
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent
Given these considerations, a potential solution could involve:
const os = (() => {
if (/windows/i.test(navigator.userAgent)) {
return "Windows"
}
else if (/iphone/i.test(navigator.userAgent)) {
return "iOS"
}
else if (/ipad/i.test(navigator.userAgent)) {
return "iOS"
}
else if (/macintosh/i.test(navigator.userAgent)) {
return "Mac OS"
}
// add more user agents to detect...
})();
If you're seeking the solution, it's likely found on this Mozilla site.
Within my form, I have a single input text field that is required (ng-required="true") and a group of radio buttons (each with ng-model="House.window" and ng-required="!House.window"). Interestingly, I've discovered that if I select a radio button fir ...
I recently encountered an issue with an input field that had the type "datetime" and a min-date condition set to today's date. The flow was such that if a valid date was entered, the submit button would be enabled, otherwise it would remain disabled. ...
Similar Question: JavaScript Method for Separating Thousands I'm looking to find a way to separate numbers by a thousand using JavaScript. For example, I would like to turn "1243234" into "1 243 234", or "1000" into "1 000" and so on. (sorry for ...
While I know there may be similar questions out there, the details of my situation are unique. I'm facing an issue with building a new window using ExtJS, starting from a pre-existing grid. The goal is to populate this new window with references to el ...
Looking for a way to set a height on product descriptions using jQuery? Check out the solution below: https://www.example.com/product-example Here is the code snippet that can help you achieve this feature: $(document).ready(function() { var $dscr = $ ...
I am currently working on the final part of my radio script, specifically focusing on the "last song" section. My goal is to retrieve a URL from an external PHP script, play the song, and once the song ends, I want to set a global variable equal to the cur ...
I am currently working on a page structure that looks like this: export default function FichaTecnica(props) { const data = props.data; return ( <> <Container> <TopData info={data} /> <DataSheet datasheet= ...
I have a script in JavaScript that is designed to replace the content of data-src attribute within each img tag with src. However, I am facing an issue where this script interferes with the functionality of a slider located in the header section. The sli ...
I am looking to create an infinite loop that adds a class to each div with a timeout in between. Currently, I have implemented it like this: $(document).ready(function() { $('.small-bordered-box').each(function(i) { var $t = $(this); ...
Looking to organize this array of objects in a hierarchical structure: var channels = [{ cid: 5, pid: 10 }, { cid: 10, pid: 0 }, { cid: 20, pid: 5 }, { cid: 15, pid: 10 }]; In this case, cid represents channel Id and pid r ...
I recently encountered an issue with the org chart I created using getorgchart. Everything was running smoothly until I tested it on IE8. It turns out that getorgchart relies on the SVG engine for rendering, which is not supported by IE8. I attempted to ...
When designing a navbar, I encountered the need to include a list of buttons. Some of these buttons should act as links, while others should call specific methods. For example, clicking on "Home" should direct the user to /home and clicking on "Log out" sh ...
<div class='col-sm-6'> <input [(ngModel)]="date" id="date" name="date" class="form-control" required/> </div> $(function () { $('#date').datetimepicker({ format: 'DD/MM/YYYY hh:mm' } ...
I'm encountering an error while trying to fetch the JSON. It seems to be in the wrong format. Below is the JSON data: { "favorite_page_response": "<div class=\"col-md-12 col-lg-12\">\n <div class=\"cart\ ...
I have encountered an issue while attempting to give a textarea autofocus using the autofocus attribute. Upon doing so, I receive an error message in the console that says: Autofocus processing was blocked because a document already has a focused element. ...
Lately, I've been exploring the wonders of angular JS and it has truly impressed me. However, one concept that still eludes my full understanding is injection. Despite this, I have successfully employed this technique across numerous pages in my proje ...
After smoothly running on Heroku, the server app encountered a problem with startup after moving to Azure. Below is the code snippet: const PORT = process.env.PORT || 2498; const INDEX = '/index.html'; const server = express() .use((req, res ...
I'm currently utilizing ng-table to construct my table. I have a button positioned at the top of the table that is initially disabled. My goal is to enable this button only when any of the checkboxes are selected. The button should automatically disab ...
For my website designs, I have been experimenting with a JavaScript library known as Wavify (https://github.com/peacepostman/wavify) to incorporate wave animations. Recently delving into the world of React, I pondered whether I could integrate Wavify into ...
Even though I thought it was a simple issue, I am still struggling to solve it. What I need is for the output value to increment continuously when I click the button. Here is the code snippet I have been working on: $('.submit').on('click&a ...