Menu
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
371
You can detect focus on input. It is very likely that the device will show a virtual keyboard in the mobile version of your application. To find out, you can compare the height of some element. For example, the application was 800 pixels high, nothing changed (there was no screen flip), but the height changed and now it is 500 pixels. And also you know that the focus is on the input field. This may mean that a virtual keyboard has appeared on the screen. Or not in some cases :)
99
No, unfortunately there is no current way to detect when the virtual keyboard appears on screen. Detecting orientation yes, that's possible using:
orientationchange listener.resize listener and inferring the orientation using window.innerHeight > window.innerWidth
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):
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!
6
You can't detect whether there is or is not the virtual keyboard only using CSS. You'll need to use some javascript.
If you are using Cordova to build the app, try using the Keyboard plugin. It fires an event whenever keyboard is shown or hidden, so that you can respond to it somehow, ie. add some class to <body> that will prevent showing the message.
https://github.com/driftyco/ionic-plugin-keyboard
Another approach would be to listen to "focus" event on all possible elements that can cause the keyboard to appear.
$(document.body).on("focus", "textarea, input", function() {
$(document.body).addClass("do-not-show-message");
}).on("blur", "textarea, input", function() {
$(document.body).removeClass("do-not-show-message");
});;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
