質問編集履歴
3
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
しかしForeFoxは以下のように上下のバーの高さを差し引いた高さ
|
|
29
|
+
しかしForeFoxは以下のように上下のバーの高さを差し引いた高さを「更に」８８％にした高さに再調整してきて次のページ（セクション）が見えかけてしまいます
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
@@ -36,17 +36,21 @@
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
バーが出現しているときのユーザー領域の高さは”visualViewport.height”で取得できるとかと聞いたので強制的にjQueryでページのロード時に、heightをその値にセットしてみました。結果はSafariとChromeはあいかわらずぴったりなのですがFireFoxだけは次ページは見えることはなくなったのですが、上下のバーを差し引いた高さよりランディングページが少しだけ（30pxほど）短くなっており、可視領域を埋め尽くせていない部分は白塗り状態です。表示されているランディングページと下のナビバーの間に白帯がある感じです。結局、次のページが見えかけている状態と殆ど変わらないのです。この白い部分の要素が何なのかは検証できていないのですが・・・
|
|
39
|
+
バーが出現しているときのユーザー領域の高さは”visualViewport.height”で取得できるとかと聞いたので強制的にjQueryでページのロード時に、heightをその値にセットしてみました。結果はSafariとChromeはあいかわらずぴったりなのですがFireFoxだけは次ページは見えることはなくなったのですが、上下のバーを差し引いた高さよりランディングページが少しだけ（30pxほど）短くなっており、可視領域を埋め尽くせていない部分は白塗り状態です。表示されているランディングページと下のナビバーの間に白帯がある感じです。結局、次のページ（セクション）が見えかけている状態と殆ど変わらないのです。この白い部分の要素が何なのかは検証できていないのですが・・・
|
|
40
40
|
|
|
41
41
|
``` JavaScript
|
|
42
42
|
|
|
43
|
-
$('
|
|
43
|
+
$('#head.').css('min-height', visualViewport.height)
|
|
44
44
|
|
|
45
45
|
```
|
|
46
46
|
|
|
47
47
|
これはどう解決することができるでしょうか？
|
|
48
48
|
|
|
49
49
|
なお、ブラウザのスニッフィングは禁止されてて使えません
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
色々考えるとやはりFireFoxの挙動が正解と思います。上下に出ているブラウザのバーはユーザーには触ることはできませんから、ViewPortの１００％の高さである”100vh”は、画面の高さから上下のバーを高さを引いたものにすべきです。なので、おかしいのはSafariとChromeということになると思います。ただ実際にはこうやって挙動が違うので何かしら対策しないといけないので、有効なものを教えていただきたくお願いいたします。
|
|
50
54
|
|
|
51
55
|
|
|
52
56
|
|
2
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -46,6 +46,8 @@
|
|
|
46
46
|
|
|
47
47
|
これはどう解決することができるでしょうか？
|
|
48
48
|
|
|
49
|
+
なお、ブラウザのスニッフィングは禁止されてて使えません
|
|
50
|
+
|
|
49
51
|
|
|
50
52
|
|
|
51
53
|
検証環境
|
1
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
```CSS
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
#head {
|
|
10
10
|
|
|
11
11
|
height: 100vh;
|
|
12
12
|
|