catnose

<p>iOSで<code>window.innerHeight</code>がキーボードの高さを考慮してくれない（キーボードの表示有無に関わらず同じ値を返す）のでちょっと困っていたんですが、<br>
iOS13から<code>visualViewport.height</code>を使うことでキーボードを除いた高さを取得できるようになったんですね。</p>
<p>👇 このツイートの動画がわかりやすい。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__605ada5e4f5ce" src="https://embed.zenn.studio/tweet#zenn-embedded__605ada5e4f5ce" data-content="https%3A%2F%2Ftwitter.com%2Fjesper_vos%2Fstatus%2F1179673256925814785" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://twitter.com/jesper_vos/status/1179673256925814785" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://twitter.com/jesper_vos/status/1179673256925814785</a></p>
<p>AndroidでもiOSと同じようにキーボードを除いた高さを返してくれるっぽい。</p>
<h2 id="visualviewport%E3%81%AE%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%AF%BE%E5%BF%9C">
<a class="header-anchor-link" href="#visualviewport%E3%81%AE%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%AF%BE%E5%BF%9C" aria-hidden="true"></a> <code>visualViewport</code>のブラウザ対応</h2>
<p>モダンブラウザはすべて対応してる。IEは未対応。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__2949b15e36e2f" src="https://embed.zenn.studio/card#zenn-embedded__2949b15e36e2f" data-content="https%3A%2F%2Fcaniuse.com%2F%3Fsearch%3DvisualViewport" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://caniuse.com/?search=visualViewport" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://caniuse.com/?search=visualViewport</a></p>


iOSでキーボードを除いた高さを取得するにはvisualViewport.heightを使う

`visualViewport`のブラウザ対応

visualViewportのブラウザ対応

`visualViewport`のブラウザ対応