iOSのSafariでvhによるheightの指定が実際より少し大きくなる
iOSのSafariで heightを "vh" で指定した場合、実際より一回り大きなサイズになってしまいます。
例えば、"height:100vh" とすると、表示領域全体より少し大きくなります。
おそらく、iOSのSafariはアドレスバーの領域も含めて100vhとして計算しているのではないかと思います。
このため、他のブラウザと表示に差がでてしまうのですが、iOSのsafariでvhを意図通りに使う方法はありませんでしょうか。
ちなみに%は正しく表示されます。
以下はサンプルです。
height:89vh ですが、iPhone6(iOS9.3.2)で画面全体に表示されます。
<!DOCTYPE html>
<html>
<head>
<title>VHTest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
body,html {
width: 100%; height: 100%;
margin: 0; padding: 0;
}
#contents {
position: absolute;
left: 0; top:0;
width: 100vw; height: 89vh;
background-color: darkcyan;
}
</style>
</head>
<body>
<div id="contents"></div>
</body>
</html>