[Test] the window height when the keyboard is open

index.html

<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>

script.js

function displaySize() {
    $("#js-width").text(window.innerWidth);
    $("#js-height").text(window.innerHeight);
}

$(function() {
    displaySize();
    
    $(window).resize(function() {
        displaySize();
    });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

html {
    font-family: sans-serif;
}

.size {
    font-size: 1.5em;
    
    .value {
        font-weight: bold;
    }
    
    .important {
        color: #cc0000;
    }
}

.form {
    margin-top: 2em;
}

test-the-window-height-when-the-keyboard-is-open.markdown

[Test] the window height when the keyboard is open

A Pen by Michèle on CodePen.

License.