全画面のハンバーガーメニューをiPhoneで表示する場合のliのheight設定

前提・実現したいこと

全画面のハンバーガーメニューを作成しています。
PCでは問題なく表示できるのですが、iPhoneで開くとメニューバーの高さ分liの位置がズレます。
iPhoneのメニューバーがあってもなくても全画面で問題なく表示できるようにしたいです。

ナビ全体の高さはhttps://vow.design/webdesign/css-height100vh-fill-available/を参考にし、
height:100vh;
height: -webkit-fill-available;
でメニューバーの有無を問わず全画面表示できました。
ですが、この場合のli,aのheight、line-heightの設定がわかりません。

初歩的な質問で恐縮ですが、解決方法をご存知の方がいらっしゃいましたら
お力添えいただけますと幸いです。

発生している問題・エラーメッセージ

・iPhoneの場合、liの高さをulの1/6に設定しようとするとアドレスバーの高さ分位置がずれる
・li内の文字がliの縦方向中央に表示できない

該当のソースコード

html
1	<nav class="gnav" id="gnav">
2	<ul class="menu" id="menu">     
3		<li><a href="01">01</a></li>
4		<li><a href="02">02</a></li>
5		<li><a href="03">03</a></li>
6		<li><a href="04">04</a></li>
7		<li><a href="05">05</a></li>
8		<li><a href="06">06</a></li>
9	</ul>

CSS
1.gnav {
2    position: fixed;
3    top: 0;
4    right: -100vw;
5    width: 100vw;
6    height: 100vh;
7    height: -webkit-fill-available;
8    z-index: 999;
9}
10.gnav ul{
11    background-position: right center;
12    height: 100vh;
13    height: -webkit-fill-available;
14}
15.gnav ul li {
16    display:block;
17    height: 16.6vh;
18    line-height: 16.6vh;
19}
20.gnav ul li a {
21    display: block;
22    font-size: 30px;
23    font-weight: bold;
24    height: inherit;
25    height: -webkit-fill-available;
26    line-height: inherit;
27}