質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.93%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 310

T_Furuta

score 20

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

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

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

index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta content="width=1280, maximum-scale=1.0" name="viewport"/>
  <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'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <link href="img/favicon.png" rel="shortcut icon"/>
  <meta content="yes" name="apple-mobile-web-app-capable"/>
  <meta content="yes" name="mobile-web-app-capable"/>
  <meta content="default" name="apple-mobile-web-app-status-bar-style"/>
  <!-- Facebook -->
  <meta content="" property="og:url"/>
  <meta content="website" property="og:type"/>
  <!-- Twitter -->
  <meta content="photo" name="twitter:card"/>
  <link href="css/web12801.css" rel="stylesheet" type="text/css"/>
  <meta content="AnimaApp.com - Design to code, Automated." name="author"/>


  <script>
  </script>
</head>
<body style="margin: 0; background: rgba(255, 255, 255, 1.0);">
 <ons-navigator id="navigator" page="web12801.html"></ons-navigator>
</body>
</html>
web12801.html

<ons-page id="web12801_html">
    <input id="anPageName" name="page" type="hidden" value="web12801"/>
    <div class="web12801 word-break ">
        <div style="width: 1280px; height: 100%; position:relative; margin:auto;">
            <img alt="Image/" src="./img/ell19613028@1x.png" class="ell196130280"/>
            <img alt="Image/" src="./img/---742@1x.png" class="a7421"/>
            <a href="1.html">
                <img alt="Image/" src="./img/---836@1x.png" class="a8362"/>
            </a>
            <div class="a3">
                ログイン
            </div>

            <div class="a4">
                XXXXシステム
            </div>


            <div class="forminputrequiredfield5">

                <div class="signin-form-item">
                    <input class="userid" id="username" name="username" onInput="checkForm(this)"></input>
                </div>

            </div>
            <div class="forminputrequiredfield6">

                <div class="signin-form-item">
                    <input class="password" id="password" name="password" type="password" onInput="checkForm(this)"></input>
                </div>

            </div>
        </div>
    </div>
</ons-page>
web12801.css

.web12801 {
  width               : 100%;
/*  min-width           : 500px;*/
  height              : 100%;
/*  min-height          : 300px;*/
  position            : relative;
  overflow            : hidden;
  margin              : 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color    : rgba(255, 255, 255, 1.0);
}
a {
  text-decoration     : none;
}
div {
  -webkit-text-size-adjust: none;
}

.web12801 .userid {
  border: none;
  border-bottom: 2px solid #e9e9e9;
  color: #6b6b6b;
  font-family: 'Open Sans', sans-serif;
  font-size: 2em;
  height: 50px;
  transition: border-color 0.3s;
  width: 60%;
  box-sizing: border-box;
  box-shadow: 0 0 8px #6b6b6b;
  margin-left: 20%;
}

.web12801 .password {
  border: none;
  border-bottom: 2px solid #e9e9e9;
  color: #6b6b6b;
  font-family: 'Open Sans', sans-serif;
  font-size: 2em;
  height: 50px;
  transition: border-color 0.3s;
  width: 60%;
  box-sizing: border-box;
  box-shadow: 0 0 8px #6b6b6b;
  margin-left: 20%;
}


.web12801 .ell196130280 {
  background-color    : rgba(255,255,255,0.0);
  left                : -400px;
  position            : absolute;
  margin              : 0;
  height              : 1169px;
  width               : 1761px;
  top                 : -203px;
}
.web12801 .a7421 {
  background-color    : rgba(255,255,255,0.0);
  top                 : 0px;
  left                : 590px;
  height              : 800px;
  width               : 535px;
  position            : absolute;
  margin              : 0;
}
.web12801 .a8362 {
  background-color    : rgba(255,255,255,0.0);
  left                : 640px;
  position            : absolute;
  margin              : 0;
  height              : 66px;
  width               : 162px;
  top                 : 518px;
}
.web12801 .a3 {
  background-color    : rgba(255,255,255,0.0);
  left                : 690px;
  position            : absolute;
  margin              : 0;
  height              : auto;
  width               : auto;
  top                 : 541px;
  transform           : rotate(0deg);
  opacity             : 1.0;
  font-family         : "Source Han Sans JP", Helvetica, Arial, serif;
  font-weight         : 700;
  font-style          : normal;
  font-size           : 16.0px;
  color               : rgba(255, 255, 255, 1.0);
  text-align          : left;
  letter-spacing      : 0.8px;
  line-height         : 12.0px;
}
.web12801 .a4 {
  background-color    : rgba(255,255,255,0.0);
  left                : 650px;
  position            : absolute;
  margin              : 0;
  height              : auto;
  width               : auto;
  top                 : 342px;
  transform           : rotate(0deg);
  opacity             : 1.0;
  font-family         : "Source Han Sans JP", Helvetica, Arial, serif;
  font-weight         : 700;
  font-style          : normal;
  font-size           : 30.0px;
  color               : rgba(255, 255, 255, 1.0);
  text-align          : left;
  line-height         : 42.0px;
}
.web12801 .forminputrequiredfield5 {
  background-color    : rgba(255,255,255,0.0);
  left                : 650px;
  position            : absolute;
  margin              : 0;
  height              : 50px;
  width               : 296px;
  top                 : 395px;
  transform           : rotate(0deg);
  opacity             : 1.0;
}
.web12801 .forminputrequiredfield6 {
  background-color    : rgba(255,255,255,0.0);
  left                : 650px;
  position            : absolute;
  margin              : 0;
  height              : 50px;
  width               : 296px;
  top                 : 460px;
  transform           : rotate(0deg);
  opacity             : 1.0;
}

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

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

web12801.css

.web12801 {
  width               : 100%;
  min-width           : 500px;  /*ここのコメントを有効にした*/
  height              : 100%;
  min-height          : 300px;  /*ここのコメントを有効にした*/
  position            : relative;
  overflow            : hidden;
  margin              : 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color    : rgba(255, 255, 255, 1.0);
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る