iOSのsafariでだけ要素を表示させるJavaScript

2025年8月12日

当サイトには広告が含まれています。

こんにちは菅井です。

コーダーの皆さんなら毎度毎度iPhoneのsafariにはほとほと困らせられてる日々をお過ごしだと思いますが、今回はiOSのsafariでだけどうしても動作しないプラグインがあり、その注意書きをsafariでだけ表示させたいと思いましたので、jsで実装してみました。（chatGPTに書いてもらいました）

こういうケースはあまりないと思うんですけど、念の為残しておきます。

class名をふればどんな要素でも大丈夫だと思います。例ではpにしてます。

実際のコード紹介

HTMLはこちら。対象の要素に、class=”iphone-safari-only”　を書いてあげてください。

HTML

<p class="iphone-safari-only">
  Sorry, this plugin does not work on Safari for iOS.
</p>

<p class="iphone-safari-only">
  Sorry, this plugin does not work on Safari for iOS.
</p>

jsはこちら。

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  var ua = navigator.userAgent;
  var isIphoneSafari =
    /iPhone/.test(ua) &&
    /Safari/.test(ua) &&
    !/CriOS|FxiOS|EdgiOS/.test(ua); // Chrome, Firefox, Edge除外

  if (!isIphoneSafari) {
    document.querySelectorAll(".iphone-safari-only").forEach(function (el) {
      el.style.display = "none";
    });
  }
});

document.addEventListener("DOMContentLoaded", function () {
  var ua = navigator.userAgent;
  var isIphoneSafari =
    /iPhone/.test(ua) &&
    /Safari/.test(ua) &&
    !/CriOS|FxiOS|EdgiOS/.test(ua); // Chrome, Firefox, Edge除外

  if (!isIphoneSafari) {
    document.querySelectorAll(".iphone-safari-only").forEach(function (el) {
      el.style.display = "none";
    });
  }
});