あ、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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに
クリームパンも真ん中にクリームが入ってると嬉しいですー
うふふふふー
