How to display specific <div> content only on iOS device (iPhone, iPad) in basic HTML-CodePudding

I am using embedded app in iframe that does not specifically work on iPhones and iPads. Is there any chance to display specific HTML content when iPhone/iPad device is detected?

CodePudding user response：

Yes it's possible with navigator.userAgent.

<body>
........
   <script>
      let isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);

      if (isIOS) {
         // IOS deivce
         document.body.innerHTML = "<p>IOS Device</p>"
      }
   </script>
</body>

CodePudding user response：

First you should detect that your device is ios then add a custom class to your element:

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)
}
if(iOS) {
   // get your element and add class to it to show it
}