teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記

2018/08/23 02:29

投稿

_lemon2003_
_lemon2003_

スコア274

answer CHANGED
@@ -8,4 +8,50 @@
8
8
  ```
9
9
 
10
10
  で`body`を指定していると思いますが、そのbodyの大きさをフルスクリーン時に固定するという手もあります。
11
- `body`を変更するとダメな場合は、`wrapper`を作って指定してもいいと思います。
11
+ `body`を変更するとダメな場合は、`wrapper`を作って指定してもいいと思います。
12
+
13
+ ---
14
+
15
+ # 追記1
16
+ # 策1
17
+ ```css
18
+ body {
19
+ height: 100%;
20
+ }
21
+ ```
22
+
23
+ `height: 100%` でダメかな..?
24
+
25
+ ## 策2苦肉の策
26
+ ```css
27
+ body { /* セレクターは jquery で指定したものと同じにする */
28
+ bottom: 0;
29
+ position: absolute;
30
+ }
31
+ ```
32
+
33
+ ```jquery
34
+ (function(){
35
+ window.scrollTo(0, 0);
36
+ let w = window.innerWidth;
37
+ let h = window.innerHeight;
38
+ $(window).on("orientationchange", function(){
39
+ if (w > h) {
40
+ document.body.width = h;
41
+ document.body.height = w;
42
+ }else{
43
+ document.body.width = w;
44
+ document.body.width = h;
45
+ }
46
+ });
47
+ })()
48
+ ```
49
+
50
+ アドレスバーを含む(ステータスバーを除く)高さを直接求める方法が
51
+ 無かったので、`window.scrollTo(0, 0)`で内部的にスクロールした直後に幅と高さを求めました。
52
+ もし求める方法がわかれば、直接代入してください。
53
+
54
+ デバッグする方法がないので、本当にこれで動くのかわかりません。
55
+
56
+ もし、この方法がうまくいかないなら、`document.documentElement.clientHieght`をつかってみるのも
57
+ 手かもしれません。