【jQuery】iOS（Safari）だと100vhが少しはみ出てしまう対策

2024.5.28
更新 2026.10.29
デザインのメモ
jQuery slick

あ、iPhoneで見るとちょっとズレてますー

そんな時はブラウザの高さを自動で取得しちゃえばOKですよー

画像を画面いっぱいに表示する（ブラウザサイズを自動で取得してiOS対策）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="full">
  <div class="center_logo">
    <a href="https://125naroom.com/"><img src="https://125naroom.com/wp/wp-content/themes/design125naroom/img/logo_125naroom.svg" alt="125naroom" width="160" height="160"></a>
  </div>
</div>

CSS

.full {
  position: relative;
  background-image: url(https://125naroom.com/demo/common/img/slide01.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.full .center_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fadeInup_center_logo 1s ease-in-out both;
  animation-delay: .8s;
}
@keyframes fadeInup_center_logo {
  0% {
    transform: translate(-50%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
.full .center_logo a {
  display: block;
}
.full .center_logo a img {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .full .center_logo { animation: none; }
}

jQuery

// ブラウザサイズを自動で取得してiOS対策
$(function () {
  function setHeight() {
    var hSize = $(window).height(); // ブラウザの縦のサイズを取得
    $(".full").height(hSize);
  }
  setHeight();
  $(window).on('resize', setHeight); // ページをリサイズした時の処理
});

見本ページをひらく（画像を画面いっぱいに表示する）

『slick』を使って全画面表示（ブラウザサイズを自動で取得してiOS対策）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="full">
  <div class="img01"></div>
  <div class="img02"></div>
  <div class="img03"></div>
</div>

CSS

.full div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0;
}
.full div.img01 {
  background-image: url(https://125naroom.com/demo/common/img/slide01.svg);
}
.full div.img02 {
  background-image: url(https://125naroom.com/demo/common/img/slide02.svg);
}
.full div.img03 {
  background-image: url(https://125naroom.com/demo/common/img/slide03.svg);
}
.full .slick-dots {
  bottom: 4%;
  z-index: 1;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .slick-track, .slick-list, .slick-slide { transition: none !important; }
}

jQuery

$(function () {
  $(".full").slick({
    arrows: false,
    dots: true,
    autoplay: true,
    autoplaySpeed: 1500,
    speed: 1500,
    fade: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
  });
});

// ブラウザサイズを自動で取得してiOS対策
$(function () {
  function setHeight() {
    var hSize = $(window).height(); // ブラウザの縦のサイズを取得
    $(".full").height(hSize);
  }
  setHeight();
  $(window).on('resize', setHeight); // ページをリサイズした時の処理
});

見本ページをひらく（『slick』を使って全画面表示）

メモ

以前の iOS（Safari）では、アドレスバーの高さの分だけズレてしまうので、画像を全画面表示にしたいときに『100vh』はあまり使えませんでした。そこで、この記事では jQuery でブラウザの高さを取って合わせています。

いまは CSS だけで解決できます。『100svh』（アドレスバーが出ているときの、いちばん小さい画面の高さ）を使えば、はみ出しません。

.full {
  height: 100vh; /* 100svh が使えない古いブラウザ用 */
  height: 100svh;
}

コードを見る（HTML・CSS）

HTML

<div class="full">
  <div class="center_logo">
    <a href="https://125naroom.com/"><img src="https://125naroom.com/wp/wp-content/themes/design125naroom/img/logo_125naroom.svg" alt="125naroom" width="160" height="160"></a>
  </div>
</div>

CSS

.full {
  position: relative;
  height: 100vh; /* 100svh が使えない古いブラウザ用 */
  height: 100svh;
  background-image: url(https://125naroom.com/demo/common/img/slide01.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.full .center_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fadeInup_center_logo 1s ease-in-out both;
  animation-delay: .8s;
}
@keyframes fadeInup_center_logo {
  0% {
    transform: translate(-50%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
.full .center_logo a {
  display: block;
}
.full .center_logo a img {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .full .center_logo { animation: none; }
}

見本ページをひらく（CSS だけで 100svh）

ほかに『100dvh』（アドレスバーの出し入れに合わせて変わる高さ）と『100lvh』（アドレスバーが隠れているときの、いちばん大きい画面の高さ）もあります。『100dvh』はスクロールのたびに高さが変わって中身が動くことがあるので、全画面の画像には『100svh』がおすすめです。

Safari 15.4・Chrome 108・Firefox 101 から使えます。もっと古いブラウザにも対応したいときは、この記事の jQuery の方法をどうぞ。

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス

jQuery（英語版）