This repository has been archived by the owner on Dec 29, 2022. It is now read-only.
/
always-show-bottom-menubar.html
89 lines (74 loc) · 4.55 KB
/
always-show-bottom-menubar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Search Console -->
<meta name="google-site-verification" content="ls7kuvIKSqVa_dcixqKvFwl393swvYMkHCkG-xtlCj0">
<title>PoC : iOS Safari Web</title>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LP3ZQV2R3M"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','G-LP3ZQV2R3M');gtag('config','UA-106501-6');</script>
<!-- Google AdSense -->
<script data-ad-client="ca-pub-6475907504235292" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
/* ページ全体はスクロールしないようにする */
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
}
/* 画面全体に広がりスクロールするラッパーを用意する */
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
/* 内部要素の margin を打ち消さないために padding を指定したコンテナを用意しておく */
.container {
padding: 15px;
}
/* コンテンツの余白と行間 */
.container > * {
margin: 0 0 15px;
line-height: 1.8;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<h1>Always Show Bottom MenuBar</h1>
<p>iOS Safari における画面下部のメニューバーを、スクロールしても常に表示したままにする。</p>
<p>iOS7 時代は、viewport に <code>minimal-ui</code> という独自のプロパティを指定することで、メニューバーを非表示にできた。</p>
<p>バージョンアップによりこの機能が廃止されたため、スクロールしてもメニューバーが隠れないようにする方法を考えた。</p>
<p>html・body 要素のスクロールによってメニューバーが隠れるため、ページのスクロールは行わないようにした。代わりに body 要素直下に Wrapper 要素を配置し、これを画面いっぱいに広げて <code>overflow: scroll</code> を指定することでスクロールを可能にした。</p>
<p>ページ最上部でステータスバーに向けてスワイプすると、わずかにメニューバーが隠れようとする場合がある。詳細は不明。</p>
<p>また、ページ全体をスクロールさせていないので、ステータスバーをタップしてページ最上部にスクロールすることができない。</p>
<ul>
<li>参考：<a href="https://qiita.com/gonshi_com/items/9aef250920b900fea929">iOS Safari で画面下部のメニューバーが消えないようにする</a></li>
</ul>
<ul>
<li><a href="index.html">Index</a></li>
</ul>
<p>縦スクロール量を稼ぐためダミー文章を入れる。</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
<p>ダミー文章終わり。</p>
<ul>
<li><a href="index.html">Index</a></li>
</ul>
</div>
</div>
</body>
</html>