SOLVED! View element based on Browser and Device

Design help Custom code
1

Hi All,

I’m trying to make a link ‘See FX in Augmented Reality’ appear only if the page is loaded on an iOS iPhone or iPad using the Safari Browser.

Currently, it presents the link to all machines and browser types which don’t support USDZ 3d models in this case

Does anyone have any experience of doing this?

Thank you!

Here is my site Read-Only: FX Page

2

hi @AshleyVinning as MDN mentioned :
Warning: Please read Browser detection using the user agent for why serving different Web pages or services to different browsers is usually a bad idea.

But, if you would like to do that anyway here are links that can help you to detect browser and device with help of javascript. it is straight forward simple code to start with.

Be aware that on iOS all browsers runs on webkit as Apple doesn’t allow 3-rd party companies permission use their own code (not surprised). Simply said on iOS Chrome , Firefox or other browsers just look like different apps but it is only different design for Safari. This will most probably change in future as they facing law suite to open codebase because of monopoly. But when it happens …

Good luck

feel free to find more sources to dive deeper in this problematic.

1 Like
3

Thanks for sending this through!

Yes I can see what they mean about this warning. In an ideal world, all browsers would support things like USDZ, but for now, it’s just Safari.

I’ve assembled this JS which should do the trick,


<script>
$(document).ready(function() {
    var isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
    var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

    if (!(isIOS && isSafari)) {
        $('.AR-ios-button').hide();
    }
});
</script>

I’ll update the thread with my findings.

4

Final update from me.

I decided to go off the html ID of the element instead and this works.

<script>
document.addEventListener('DOMContentLoaded', function() {
    var isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
    var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

    if (!(isIOS && isSafari)) {
        var arButton = document.getElementById('AR-ios-button');
        if (arButton) {
            arButton.style.display = 'none';
        }
    }
});
</script>

All the best,

Ashley

1 Like
5

We ran into this question with a client project and created a script to show or hide any desired element based on the device, OS or browser being used by the site visitor.

Here is a link to the tutorial video that goes through the problem as well as walking you through the solution.

If there are any questions please feel free to tag me!

Happy Friday!