0

I have written code for os detection, but instead I want to detect browser, and show different button depending on browser

<!-- chrome and safari browser which shows mdoern version of code -->
<div id="cs"> 
<a href="property.php?id=<?php echo $row['id']; ?>"  target="_self"  class="under-slider-btn btn btn-s btn-center-xs main-bg text-uppercase font-900 rounded-s">VIEW <i class="fas fa-cube"></i> </a>

<!-- non chrome and safari browser which shows legacy version of code -->
<div id="ncs"> 
<a href="propertylegacy.php?id=<?php echo $row['id']; ?>"  target="_self"  class="under-slider-btn btn btn-s btn-center-xs main-bg text-uppercase font-900 rounded-s">VIEW <i class="fas fa-cube"></i> </a>

<script>
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var isIos = ua.indexOf("iphone") > -1 || ua.indexOf("ipad") > -1 || ua.indexOf("ipod") > -1;
if(isAndroid) {
    document.getElementById("cs").style.display = "block";
    document.getElementById("ncs").style.display = "none";
}else if(isIos){
  document.getElementById("cs").style.display = "block";
    document.getElementById("ncs").style.display = "none";

}else{
    document.getElementById("cs").style.display = "none";
    document.getElementById("ncs").style.display = "block";

}
</script>
updatedlabs
  • 1
  • Welcome to SO! Please read https://stackoverflow.com/help/how-to-ask. Add your own efforts such as coding approaches and docs research. – jasie May 07 '21 at 08:59

2 Answers2

0

You can userAgent to detect browser, But Showing user different version of UI according to the browser is recommended to be avoided,

if (navigator.userAgent.indexOf("Chrome") !== -1){
        alert('Chrome')
    } else {
       alert('Not Chrome')
    }
Kerry
  • 384
  • 3
  • 25
0

Here is a nice answer to your question >

How to detect Safari, Chrome, IE, Firefox and Opera browser?

Depending on the TRUE / FALSE result, you can do your operation.

Dharman
  • 30,962
  • 25
  • 85
  • 135
RV7
  • 55
  • 5