<p class="mesaj">
  Yalnızca mobil cihazlarda ve şu an itibariyle iOS/iPhone'larda çalışmaz.<br />
  Volkan Yılmaz - <a href="https://volkanyilmaz.com.tr">volkanyilmaz.com.tr</a>
</p>
html,
body {
  height: 100vh;
  max-height: 100%;
  min-height: 150px;
  height: 100vh;
}
body {
  display: flex;
  place-items: center;
  align-items: center;
  align-content: center;
  place-content: center;
  justify-content: center;
}
.container {
    max-width: 500px;
}
.mesaj {
  position: absolute;
  bottom: 0;
}
if (Boolean(window.navigator.vibrate) || Boolean(window.navigator.mozVibrate)) {
  var butonlar =
    "<div class='container'><div class='row'><div class='col'><button class='btn btn-primary btn-lg' id='singleVibration'>Tekil</button></div><div class='col'><button class='btn btn-success btn-lg' id='patternVibration'>Desen</button></div><div class='col'><button class='btn btn-danger btn-lg' id='cancelVibration'>Durdur</button></div></div></div>";
  document.body.insertAdjacentHTML("beforeend", butonlar);

  const singleVibration = document.getElementById("singleVibration");
  const patternVibration = document.getElementById("patternVibration");
  const cancelVibration = document.getElementById("cancelVibration");
  window.navigator.vibrate =
    window.navigator.vibrate || window.navigator.mozVibrate;

  singleVibration.onclick = function (e) {
    window.navigator.vibrate(500);
  };

  patternVibration.onclick = function (e) {
    window.navigator.vibrate([500, 200, 800]);
  };

  cancelVibration.onclick = function (e) {
    window.navigator.vibrate(0);
  };
} else {
  document.body.innerHTML = "<div align='center'>Desteklenmeyen cihaz</div>";
}

External CSS

  1. https://codepen.io/wolkanca/pen/wvgOPWb.css
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://codepen.io/wolkanca/pen/wvgOPWb.js