I want the layout to remain unchanged when the keyboard shows, allowing users to scroll freely. Below is the code snippet:
<html>
<header>
<title>Test Page</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0;padding:0;}
</style>
</header>
<body>
<div style='float:left;width:100%;height:20%;background:red;'></div>
<div style='float:left;width:100%;height:60%;background:pink;'></div>
<div style='float:left;width:100%;height:20%;background:tan;'><input type='text' style='float:left;height:30%;width:50%;'></div>
</body>
</html>