- 記事公開日
iPhone・Androidの高さ100vhがはみ出る問題（スマホだけに適用）
CSSで背景画像を画面いっぱいに広げようとしたの。
そしたら、iPhoneで見たときに背景画面が下にはみ出てしまってて・・・
高さを100vhにしているけど、おそらくiPhoneのナビゲーションの高さ分がはみ出てしまっている感じ。
どうしたらいい？
jQueryで、ナビゲーション分の高さを除いた値を取得する方法がオススメです。
$(‘クラス・ID名’).css(‘height’,$(window).height());
なお、スマホ以外に影響が出ないようメディアクエリで振り分けておくと安全です。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
$(function(){
<!-- メディアクエリ（スマホ） -->
if (window.matchMedia("(max-width: 960px)").matches) {
<!-- iPhone・Android用に画面の高さを取得 -->
$('.loader,header,div.slide_img').css('height',$(window).height());
});
});
</script>
</head>
<html>この場合、
- <div class=”loader”></div>
- <header></header>
- <div class=”slide”></div>
複数の要素に画面ぴったりの高さが適用されます。