Wordpress 画像Parallax効果の端末表示不具合について。

Question

Parallax　ソースコードページ　(https://codepen.io/LeapInCorp/pen/VGZeyV)
上記のサイトの用にしたいのですが
Wordppressでコードをそのまま利用し、PCから見るとParallax効果も画像も上記のページの用に反映しブラウザサイズを変更しても
なんら違和感もなく表示、反映され なんの問題もないのですが、
iPad mini 5　から見ると画像が拡大された感じになり、Parallax効果はあるのですが

画像が拡大された感じになり、こんな風になっちゃいます。

iPadmini5から見るとおかしくなるのか？と思い
iPadmini 5 の端末から　上記のサンプルソースコード　がのっているサイトをみると

こんな風にキレイに表示されます。
どうすればこのサイトの用に綺麗に表示されるのかわかりません。
同じソースコードを利用しているだけなのですが
CSSもHTMLも変えていないのに、なぜ画像が拡大された感じになるのでしょうか？
対処法を教えて頂けると幸いです。

一応同じソースですが念のために記載しておきます。　JQueyは表示させる為少し変更有です。

  <div class="wp-block-cover-image has-background-dim" style="background-image:url(https://leap-in.com/wp-content/uploads/2018/06/mountain.jpg)">
    <p class="wp-block-cover-image-text"><strong>Parallax 1</strong></p>
  </div>

.wp-block-cover-image {
  position: relative;
  background-size: cover;
  background-position: 50%;
  min-height: 430px;
  width: 100%;
  margin: 0 0 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover-image h2 {
  color: #fff;
  font-size: 2em;
  line-height: 1.25;
  z-index: 1;
  margin-bottom: 0;
  max-width: 610px;
  padding: 14px;
  text-align: center;
}
.wp-block-cover-image.has-background-dim:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.0);
}
.wp-block-cover-image {
  background-attachment: fixed;
  background-position: 50% 0;
}

<script>
jQuery(function($) {
  /** change value here to adjust parallax level */
  var parallax = -0.5;

  var $bg_images = $(".wp-block-cover-image");
  var offset_tops = [];
  $bg_images.each(function(i, el) {
    offset_tops.push($(el).offset().top);
  });

  $(window).scroll(function() {
    var dy = $(this).scrollTop();
    $bg_images.each(function(i, el) {
      var ot = offset_tops[i];
      $(el).css("background-position", "50% " + (dy - ot) * parallax + "px");
    });
  });
})(jQuery);
</script>