質問編集履歴
3
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -12,18 +12,20 @@
|
|
|
12
12
|
|
|
13
13
|
そこで、高さを88vhにしたら、SafariとChromeはぴったりになりました
|
|
14
14
|
|
|
15
|
-
しかしForeFoxは以下のように上下のバーの高さを差し引いた高さ
|
|
15
|
+
しかしForeFoxは以下のように上下のバーの高さを差し引いた高さを「更に」８８％にした高さに再調整してきて次のページ（セクション）が見えかけてしまいます
|
|
16
16
|
|
|
17
17
|
結局、FireFoxだけはheightを100vhに設定するとバーを差し引いた高さに合わせてピッタリ収まります
|
|
18
18
|
もちろんそうするとSafariとChromeはナビバーの下にハンバーガーメニューが隠れてしまいます。
|
|
19
19
|
|
|
20
|
-
バーが出現しているときのユーザー領域の高さは”visualViewport.height”で取得できるとかと聞いたので強制的にjQueryでページのロード時に、heightをその値にセットしてみました。結果はSafariとChromeはあいかわらずぴったりなのですがFireFoxだけは次ページは見えることはなくなったのですが、上下のバーを差し引いた高さよりランディングページが少しだけ（30pxほど）短くなっており、可視領域を埋め尽くせていない部分は白塗り状態です。表示されているランディングページと下のナビバーの間に白帯がある感じです。結局、次のページが見えかけている状態と殆ど変わらないのです。この白い部分の要素が何なのかは検証できていないのですが・・・
|
|
20
|
+
バーが出現しているときのユーザー領域の高さは”visualViewport.height”で取得できるとかと聞いたので強制的にjQueryでページのロード時に、heightをその値にセットしてみました。結果はSafariとChromeはあいかわらずぴったりなのですがFireFoxだけは次ページは見えることはなくなったのですが、上下のバーを差し引いた高さよりランディングページが少しだけ（30pxほど）短くなっており、可視領域を埋め尽くせていない部分は白塗り状態です。表示されているランディングページと下のナビバーの間に白帯がある感じです。結局、次のページ（セクション）が見えかけている状態と殆ど変わらないのです。この白い部分の要素が何なのかは検証できていないのですが・・・
|
|
21
21
|
``` JavaScript
|
|
22
|
-
$('
|
|
22
|
+
$('#head.').css('min-height', visualViewport.height)
|
|
23
23
|
```
|
|
24
24
|
これはどう解決することができるでしょうか？
|
|
25
25
|
なお、ブラウザのスニッフィングは禁止されてて使えません
|
|
26
26
|
|
|
27
|
+
色々考えるとやはりFireFoxの挙動が正解と思います。上下に出ているブラウザのバーはユーザーには触ることはできませんから、ViewPortの１００％の高さである”100vh”は、画面の高さから上下のバーを高さを引いたものにすべきです。なので、おかしいのはSafariとChromeということになると思います。ただ実際にはこうやって挙動が違うので何かしら対策しないといけないので、有効なものを教えていただきたくお願いいたします。
|
|
28
|
+
|
|
27
29
|
検証環境
|
|
28
30
|
スマホ：iPhone11 iOS 14.4.1
|
|
29
31
|
Safari
|
2
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
$('.head.').css('min-height', visualViewport.height)
|
|
23
23
|
```
|
|
24
24
|
これはどう解決することができるでしょうか？
|
|
25
|
+
なお、ブラウザのスニッフィングは禁止されてて使えません
|
|
25
26
|
|
|
26
27
|
検証環境
|
|
27
28
|
スマホ：iPhone11 iOS 14.4.1
|
1
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
ランディングなのでCSSで100vhで良いだろうと思い以下のようにしました
|
|
4
4
|
```CSS
|
|
5
|
-
|
|
5
|
+
#head {
|
|
6
6
|
height: 100vh;
|
|
7
7
|
}
|
|
8
8
|
```
|