Is it possible to identify iOS Safari exclusively without including iOS Chrome, Firefox, and other browsers in the filter?

For those familiar with working on iOS web applications, it's known that Apple's policy causes Chrome and other mobile browsers on iOS to use an outdated javascript engine. Because of this, we need to disable certain rendering for Chrome and other non-Safari browsers on iOS.

I came across this question but unfortunately, there was no helpful answer. Here are some approaches I tried (unsuccessfully):

First, I attempted to use 

is_iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g)
to detect if the browser is on iOS. Then, I used:

is_FF = navigator.userAgent.match(/(firefox)/g)
and 
is_Chrome = navigator.userAgent.match(/(chrome)/g)

to target and disable Firefox and Chrome browsers.

Upon realizing that all browsers share the same user agent string as iOS Safari, I speculated that a JavaScript function could be created to identify only Safari and differentiate it from other browsers.

javascriptios

Answer №1

When it comes to choosing which native functionality to use in browsers, there are two schools of thought. One approach involves checking the userAgent like you're doing here and adjusting features based on that information.

The downside of relying on the userAgent is that things can quickly get complex. What happens when you realize that IE8 doesn't support a particular feature you need?

An alternative solution is to check for the existence of a feature within its current context, without worrying about the userAgent. For example, let's consider the new HTML5 audio element. Looking at browser support, we see that it's not supported in IE8 or Safari < 4.0. Instead of targeting specific browsers, we can simply check if the feature exists by verifying that the Audio class is available:

if (window.Audio) {
    // Load and play the HTML5 audio element here
}

This method is much more straightforward compared to checking the userAgent.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in mandatory data required by the Screenleap API in JavaScript

I have a JSON encoded data stored in a variable called $json. Here is how it appears: I have referred to the documentation at "https://www.screenleap.com/api/presenter" ...

javascriptphpjsonapiscreensharing

A guide on adding an onClick listener to a span element dynamically and then saving it to MongoDB

I have been attempting to add an onClick event within a span tag as shown below, with the goal of storing it in MongoDb. However, my event does not seem to be saving and is automatically removed. When I retrieve data from the database, it is not present. H ...

javascriptreactjs

Identifying the End of Rendering in Three.js

Is there a way to accurately determine when rendering has been completed? I attempted the following method: scene.add( mesh ); render(); mesh.onBeforeRender = function(renderer, scene){ ... } mesh.onAfterRender = function(renderer, scene){ ... } Ho ...

javascriptthree.js

What is the best way to select an element based on its relationship to another Element object using a selector?

I am currently developing a small library in which I require the ability to select a relative element to the targeted element using the querySelector method. For instance: HTML <div class="target"></div> <div class="relative"></div& ...

javascripthtmlcss-selectors

I am having trouble understanding why my JavaScript code is bypassing the if statements

let emptyErr = [] if (!(req.body.title)) { emptyErr[0] = ('A title must be provided for a post!') } else if (!req.body.category) { emptyErr[1] = ('Please select a category for your post.') } else if (!req.body.content) { ...

javascriptnode.jsexpress

D3.js: Exploring the beauty of layered legends

I have a question regarding creating legends with triangle shapes. Specifically, I am trying to create two triangles representing "Yes" and "No". However, when I run the code below, the triangles end up overlapping each other. In an attempt to separate t ...

javascriptd3.js

Variable used to invoke a Javascript namespace

I've set up a specific namespace called Cookies with sub-namespaces ShowLabels and ShowOptions. My goal is to be able to invoke this namespace on a page using a jQuery value that will either return ShowLabels or ShowOptions. For example: Cookies.$.t ...

javascriptjquerynamespaces

What is the best way to clear dropdown selections in jQuery mobile

I stumbled upon a post discussing the topic of resetting dropdowns in jQuery. However, I encountered an issue where jQuery mobile ceased to function after making a selection. To explore this further, I have included my code snippet from jsfiddle: http://js ...

javascriptjqueryhtmljquery-mobile

Determine the exact location where the mouse was clicked on a webpage containing an iframe

I am trying to retrieve the mouse position on my HTML page, but I am encountering some issues. Here's what I have so far: document.onclick = function(click) { if (click.clientX<340){ myControl.inputs.selection = false; btnRotate.remove ...

javascripthtml

Retrieve the child element that is being clicked

Alright, I'm facing a little issue here (it seems simple, but I just can't seem to crack it)... Let me paint the picture with a snippet of HTML code below: <!-- New Website #1 --> <!DOCTYPE html> <html style='min-height:0px; ...

javascriptjqueryhtmlcss

Implementing a Unique Shuffle Algorithm in JavaScript for AMP Compatibility

Is there a way to make this JavaScript Random Shuffle code in a table AMP compliant? Specifically, is there a way to convert the stringId to be the table's Id? <script>function shuffleTable() { var table = document.getElementById("tableId"); va ...

javascriptamp-html

Retrieving information from a JSON file and displaying it in an HTML table through an asynchronous

I need to retrieve data from a server and display it in an HTML table. The server contains an array of weather forecast information as shown below. [{"date":"19\/08\/2020","weather":"Sunny","temperatur ...

javascriptarraysajax

Encountering a 'JSON parsing error' while transmitting data from Ajax to Django REST Framework

I've been encountering an issue while trying to send a JSON to my REST API built with Django Rest Framework. Every time I make this request, I receive an error message, regardless of the view I'm accessing. I suspect the problem lies in the AJAX ...

javascriptjqueryjsondjango-rest-framework

How can I create a longPress Event for a CheckBox in Codenameone?

I'm trying to figure out how to implement a long press event on a checkbox in my Codename One project. I usually use the longPointerPress method with boolean values to differentiate between short and long presses on normal buttons. However, with check ...

androidioscheckboxcodenameonelong-press

Angular is using double quotes (%22) to maintain the integrity of the data retrieved from JSON responses

After running a PHP script, the following response is returned: {"result": "0", "token":"atoken" } To execute the script with Angular, the following code is used: $http.post( API["R001"], $scope.user, {}).then($scope.postSuccess, null); Upon successful ...

javascriptjsonangularjsparsingcookies

As the Page Expands, Elements Shift into New Positions

I'm currently focused on enhancing the accessibility of my web pages. A challenge I've encountered is that when I expand the width of my page, the elements appear to shift further down the screen. It seems like this issue may be related to settin ...

javascriptcssformsmaterial-ui

Accessing a PHP variable within an AJAX handling script

Upon user login, the email is stored in $email (I also tried global $email). Subsequently, a form allows the user to input their roommate's name to search for existing appointments. Incorporating AJAX $("#reserveAPickupAppointmentForm3").submit (fun ...

javascriptjqueryajaxformsvariables

What is the best way to set the width of a w2grid to 100%

Has anyone tried using w2grid before? I'm having trouble figuring out how to make it fill its container 100%. Here's the HTML snippet: <div id="a" style="width:100%"> <!-- top left container--> <div>This ...

javascripthtmlw2ui

JavaScript's search function is encountering issues when working with multidimensional arrays

I have an array containing city names and postal codes that I need to search through. I can successfully search for the city name and retrieve the result, but when I try to search for a postal code, it doesn't register. My question is: How can I modif ...

javascriptarrayssearch

JQuery is capable of hiding a div using the .hide() method but is unable to reveal it using the

I am currently working on a basic webpage that includes a question and a set of radio buttons. Depending on the option selected by the user, the question will be hidden and either a correct or incorrect message will be displayed, both of which are initiall ...

javascriptjqueryhtmlcss