As I work on creating a cross-platform HTML page, I have encountered an issue with text fields on Android smartphones. When I attempt to type in a text box, the keyboard pops up and causes my HTML page to shrink within the viewport.
I'm curious to know why this is happening. Any insights?
Below is the relevant CSS code snippet:
body { background:#ffffff; margin:0 }
html,body{
overflow:hidden;
}
.mainbody {
display:block; border:0px solid #cccccc; position:absolute;
top:0vmin; left:0vmin; width:100%; height:100%; background:#ffffff;
}
.homeScreen1 {
position:absolute;
display:block; border:0px solid #cccccc;
background:#CDCDCD;
}
.e-number{
position:absolute;
left:11vmin;
top:8vmin;
font-size: 2.7vmin;
}