タブレット画面で、テキストボックスに入力しようとすると画面がずれてしまう

Monacaをしようして、システムを作ろうとしています。
初期画面は出来たのですが、入力画面から入力しようとすると下図のように、画面がずれてしまいます。

パソコンから入力すると、キーボードが出ないためか、画面がずれることはありません。
色々と調査してみたのですが、理由が判明しませんでした。

なお、コードは下記のようになります。

HTML
1index.html
2
3<!DOCTYPE HTML>
4<html>
5<head>
6  <meta charset="utf-8">
7  <meta content="width=1280, maximum-scale=1.0" name="viewport"/>
8  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
9  <script src="components/loader.js"></script>
10  <script src="lib/onsenui/js/onsenui.min.js"></script>
11
12  <link rel="stylesheet" href="components/loader.css">
13  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
14  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
15  <link rel="stylesheet" href="css/style.css">
16
17  <link href="img/favicon.png" rel="shortcut icon"/>
18  <meta content="yes" name="apple-mobile-web-app-capable"/>
19  <meta content="yes" name="mobile-web-app-capable"/>
20  <meta content="default" name="apple-mobile-web-app-status-bar-style"/>
21  <!-- Facebook -->
22  <meta content="" property="og:url"/>
23  <meta content="website" property="og:type"/>
24  <!-- Twitter -->
25  <meta content="photo" name="twitter:card"/>
26  <link href="css/web12801.css" rel="stylesheet" type="text/css"/>
27  <meta content="AnimaApp.com - Design to code, Automated." name="author"/>
28
29
30  <script>
31  </script>
32</head>
33<body style="margin: 0; background: rgba(255, 255, 255, 1.0);">
34 <ons-navigator id="navigator" page="web12801.html"></ons-navigator>
35</body>
36</html>
37
38

HTML
1web12801.html
2
3<ons-page id="web12801_html">
4    <input id="anPageName" name="page" type="hidden" value="web12801"/>
5    <div class="web12801 word-break ">
6        <div style="width: 1280px; height: 100%; position:relative; margin:auto;">
7            <img alt="Image/" src="./img/ell19613028@1x.png" class="ell196130280"/>
8            <img alt="Image/" src="./img/---742@1x.png" class="a7421"/>
9            <a href="1.html">
10                <img alt="Image/" src="./img/---836@1x.png" class="a8362"/>
11            </a>
12            <div class="a3">
13                ログイン
14            </div>
15
16            <div class="a4">
17                ＸＸＸＸシステム
18            </div>
19
20
21            <div class="forminputrequiredfield5">
22
23                <div class="signin-form-item">
24                    <input class="userid" id="username" name="username" onInput="checkForm(this)"></input>
25                </div>
26
27            </div>
28            <div class="forminputrequiredfield6">
29
30                <div class="signin-form-item">
31                    <input class="password" id="password" name="password" type="password" onInput="checkForm(this)"></input>
32                </div>
33
34            </div>
35        </div>
36    </div>
37</ons-page>
38
39

CSS
1
2web12801.css
3
4.web12801 {
5  width               : 100%;
6/*  min-width           : 500px;*/
7  height              : 100%;
8/*  min-height          : 300px;*/
9  position            : relative;
10  overflow            : hidden;
11  margin              : 0px;
12  -webkit-font-smoothing: antialiased;
13  -moz-osx-font-smoothing: grayscale;
14  background-color    : rgba(255, 255, 255, 1.0);
15}
16a {
17  text-decoration     : none;
18}
19div {
20  -webkit-text-size-adjust: none;
21}
22
23.web12801 .userid {
24  border: none;
25  border-bottom: 2px solid #e9e9e9;
26  color: #6b6b6b;
27  font-family: 'Open Sans', sans-serif;
28  font-size: 2em;
29  height: 50px;
30  transition: border-color 0.3s;
31  width: 60%;
32  box-sizing: border-box;
33  box-shadow: 0 0 8px #6b6b6b;
34  margin-left: 20%;
35}
36
37.web12801 .password {
38  border: none;
39  border-bottom: 2px solid #e9e9e9;
40  color: #6b6b6b;
41  font-family: 'Open Sans', sans-serif;
42  font-size: 2em;
43  height: 50px;
44  transition: border-color 0.3s;
45  width: 60%;
46  box-sizing: border-box;
47  box-shadow: 0 0 8px #6b6b6b;
48  margin-left: 20%;
49}
50
51
52.web12801 .ell196130280 {
53  background-color    : rgba(255,255,255,0.0);
54  left                : -400px;
55  position            : absolute;
56  margin              : 0;
57  height              : 1169px;
58  width               : 1761px;
59  top                 : -203px;
60}
61.web12801 .a7421 {
62  background-color    : rgba(255,255,255,0.0);
63  top                 : 0px;
64  left                : 590px;
65  height              : 800px;
66  width               : 535px;
67  position            : absolute;
68  margin              : 0;
69}
70.web12801 .a8362 {
71  background-color    : rgba(255,255,255,0.0);
72  left                : 640px;
73  position            : absolute;
74  margin              : 0;
75  height              : 66px;
76  width               : 162px;
77  top                 : 518px;
78}
79.web12801 .a3 {
80  background-color    : rgba(255,255,255,0.0);
81  left                : 690px;
82  position            : absolute;
83  margin              : 0;
84  height              : auto;
85  width               : auto;
86  top                 : 541px;
87  transform           : rotate(0deg);
88  opacity             : 1.0;
89  font-family         : "Source Han Sans JP", Helvetica, Arial, serif;
90  font-weight         : 700;
91  font-style          : normal;
92  font-size           : 16.0px;
93  color               : rgba(255, 255, 255, 1.0);
94  text-align          : left;
95  letter-spacing      : 0.8px;
96  line-height         : 12.0px;
97}
98.web12801 .a4 {
99  background-color    : rgba(255,255,255,0.0);
100  left                : 650px;
101  position            : absolute;
102  margin              : 0;
103  height              : auto;
104  width               : auto;
105  top                 : 342px;
106  transform           : rotate(0deg);
107  opacity             : 1.0;
108  font-family         : "Source Han Sans JP", Helvetica, Arial, serif;
109  font-weight         : 700;
110  font-style          : normal;
111  font-size           : 30.0px;
112  color               : rgba(255, 255, 255, 1.0);
113  text-align          : left;
114  line-height         : 42.0px;
115}
116.web12801 .forminputrequiredfield5 {
117  background-color    : rgba(255,255,255,0.0);
118  left                : 650px;
119  position            : absolute;
120  margin              : 0;
121  height              : 50px;
122  width               : 296px;
123  top                 : 395px;
124  transform           : rotate(0deg);
125  opacity             : 1.0;
126}
127.web12801 .forminputrequiredfield6 {
128  background-color    : rgba(255,255,255,0.0);
129  left                : 650px;
130  position            : absolute;
131  margin              : 0;
132  height              : 50px;
133  width               : 296px;
134  top                 : 460px;
135  transform           : rotate(0deg);
136  opacity             : 1.0;
137}
138

もし何かおかしい部分があれば、ご指摘いただけると助かります。
以上、よろしくお願いします。

行動規範の内容に同意します

回答1件

自己解決

解決しました。
CSSの中で、min-widthとmin-heightを間違えてコメントアウトしていたため、上記のような動作になっておりました。
下記コードのようにコメントを有効にすることにより、正常に動作しました。
ありがとうございました。

css
1web12801.css
2
3.web12801 {
4  width               : 100%;
5  min-width           : 500px;　　/*ここのコメントを有効にした*/
6  height              : 100%;
7  min-height          : 300px;　　/*ここのコメントを有効にした*/
8  position            : relative;
9  overflow            : hidden;
10  margin              : 0px;
11  -webkit-font-smoothing: antialiased;
12  -moz-osx-font-smoothing: grayscale;
13  background-color    : rgba(255, 255, 255, 1.0);
14}