なんにもない日の頭の中はこんなもんだったりする

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

【jQuery】iOS(Safari)だと100vhが少しはみ出てしまう対策
きのこさん
あ、iPhoneで見るとちょっとズレてます!
きのこさん
そんな時はブラウザの高さを自動で取得しちゃえばOKですよー

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

See the Pen
【jQuery】画像を画面いっぱいに表示する(ブラウザサイズを自動で取得してiOS対策)
by 125naroom (@125naroom)
on CodePen.

コードはこちら

HTML

<div class="full"></div>

CSS

.full {
  background-image: url(https://125naroom.com/demo/img/simple01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

jQuery

// ブラウザサイズを自動で取得してiOS対策
$(document).ready(function () {
  var hSize = $(window).height();
  $(".full").height(hSize); // ブラウザの縦のサイズを取得
});
$(window).resize(function () { // ページをリサイズした時の処理
  var hSize = $(window).height();
  $(".full").height(hSize); // ブラウザの縦のサイズを取得
});
きのこさん
あ、ズレてなーい
きのこさん
スマホで下のデモページをチェックー

デモページはこちら

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

See the Pen
【jQuery】『slick』を使って全画面表示(ブラウザサイズを自動で取得してiOS対策)
by 125naroom (@125naroom)
on CodePen.

コードはこちら

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/img/simple01.jpg);
}
.full div.img02 {
  background-image: url(https://125naroom.com/demo/img/simple02.jpg);
}
.full div.img03 {
  background-image: url(https://125naroom.com/demo/img/simple03.jpg);
}
.full .slick-dots {
	bottom: 4%;
	z-index: +1;
}

jQuery

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

// ブラウザサイズを自動で取得してiOS対策
$(document).ready(function () {
  var hSize = $(window).height();
  $(".full").height(hSize); // ブラウザの縦のサイズを取得
});
$(window).resize(function () { // ページをリサイズした時の処理
  var hSize = $(window).height();
  $(".full").height(hSize); // ブラウザの縦のサイズを取得
});
きのこさん
あ、slickのスライダーもズレてなーい
きのこさん
スマホで下のデモページをチェックー

デモページはこちら

メモ

iOS(Safari)ではアドレスバーの高さ分ズレてしまうので、画像を全画面表示にしたいときに『100vh』は正直あまり使えません。そんな時はjQueryで解決するのが簡単です。

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

jQuery日本語リファレンス

jQuery(英語版)

さいごに

きのこさん
クリームパンも真ん中にクリームが入ってると嬉しいですー
きのこさん
うふふふふー

関連記事

【jQuery】『slick』を使って全画面表示のスライドショー

【jQuery】スライダープラグイン「slick」実装サンプル集

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

Artio
  • 2020.03.23New
  • Artio
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
Artio
  • 2020.03.23New
  • Artio
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
3月28日
3月25日