Search code examples
javascripthtmlcssmobile

Detect virtual keyboard on screen and landscape orientation in javascript

Am working on a html based mobile app where there is requirement to design app only for portrait orientation and display message to user when he goes to landscape, This feature is working fine with css media query but problem is this that I have a form in app and when I click on any of the textbox and virtual keyboard opens and screen height changes and it shows me message for orientation change

Now I want to ask if there any way to different when actually orientation changes and when virtual keyboard on screen appears. Thanks in advance 

@media screen and (orientation: landscape) {

}

I have checked other questions related to my topic on stackoverflow but nothing helpful there

Solution

  • The short answer:

    No, unfortunately there is no current way to detect when the virtual keyboard appears on screen. Detecting orientation yes, that's possible using:

    1. css media queries (as per you example)
    2. via JavaScript using the orientationchange listener.
    3. via JavaScript using the resize listener and inferring the orientation using window.innerHeight > window.innerWidth

    The long answer:

    There should be no reason why the keyboard affects the orientation property that is interpreted by your css media query as follows:

    @media screen and (orientation: landscape) {
    ...
}

    The W3C media queries recomendation states the following for the orientation property:

    The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

    The keyboard being visible when you type in the forms textbox field simply should not trigger the orientation property to change.

    I have in the past had your issue occur when using device emulators, such as Device Mode in older versions of Google Chrome's devtools. However, when it was tested on real mobile device/s the issue did not occur.

    Also, there is this bug open in mobile chrome that may be causing resize events to fire when the keyboard appears.

    Perhaps the emulator, if that's what you are using, is incorrectly causing the the viewports height to change therefore causing the change to the orientationproperty in your media query.

    The simple gist I provided below does the following (You could try running it in your dev environment to see what happens):

    1. When the mobile device is in portrait orientation the screen shows two form input fields (displaying the words: 'foo' and 'baz').
    2. When I touch either of the form input fields the keyboard is displayed and there is no change to the content of the page.
    3. When the device it rotated 90 degrees to landscape orientation a gray panel appears showing the words: "Rotate your device to portrait"

    NOTE: The steps listed above are what happens when testing the gist below on several real mobile devices running Safari on iOS and mobile Chrome on Android (...not emulators!).

    <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>StackOveflow question 40175207</title>
    <meta name="description" content="Example gist using orientation css media query to hsow message when device is landscape" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">

body {
    padding: 0;
    margin: 0;
}

.wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.message-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: gray;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);

    will-change: transform;
}

.message-panel__text {
    position: absolute;
    top: 50%;
    text-align: center;
    font: 1em Helvetica, sans-serif;
    width: 100%;
    height: 50px;
    margin: auto;
    -webkit-transform: translateX(-50%);
            transform: translateY(-50%);
}

@media screen and (orientation: landscape) {
    .message-panel {
        transform: translateX(0);
    }
}

</style>

</head>
<body>
    <div class="wrapper">
        <form>
            <input type="text" name="input-one" value="foo">
            <input type="text" name="input-two" value="baz">
        </form>
        <div class="message-panel">
            <div class="message-panel__text">Rotate your device to portrait</div>
        </div>
    </div>
</body>
</html>

    PS: There is also Web App Manifest in Chrome for Android which allows you to lock the orientation of the device too. See here for further info.

    Hope this helps!