Skip to content

Instantly share code, notes, and snippets.

@JUSTINMKAUFMAN
Created February 1, 2023 19:55
Show Gist options
  • Save JUSTINMKAUFMAN/40a3090db0d39923a9de2cf1a40a5831 to your computer and use it in GitHub Desktop.
Save JUSTINMKAUFMAN/40a3090db0d39923a9de2cf1a40a5831 to your computer and use it in GitHub Desktop.
[Test] the window height when the keyboard is open
<div class="size">Window inner width : <span id="js-width" class="value"></span> px</div>
<div class="size">Window inner height : <span class="important"><span id="js-height" class="value"></span> px</span></div>
<p>Tap on the text field below to open the keyboard on mobile devices.</p>
<div class="form">
<label for="field">Text field</label>
<input id="field" type="text"/>
</div>
function displaySize() {
$("#js-width").text(window.innerWidth);
$("#js-height").text(window.innerHeight);
}
$(function() {
displaySize();
$(window).resize(function() {
displaySize();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
html {
font-family: sans-serif;
}
.size {
font-size: 1.5em;
.value {
font-weight: bold;
}
.important {
color: #cc0000;
}
}
.form {
margin-top: 2em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment