Клавиатура Cordova меняет раскладку - PullRequest
0 голосов
/ 14 сентября 2018

Итак, я делаю свое первое приложение Cordova и пытаюсь создать простую форму входа. Дело в том, что когда я нажимаю на элемент ввода, появляется клавиатура. По какой-то причине это полностью меняет мой макет, хотя это даже близко не сложно.

Кто-нибудь знает, почему это происходит?

<html>
<head>
    <!--
    Customize this policy to fit your own app's needs. For more guidance, see:
        https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
    Some notes:
        * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
        * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
        * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
            * Enable inline JS: add 'unsafe-inline' to default-src
    -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:; connect-src https://ikleeralles.nl:*">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <title>Hello World</title>
</head>
<body>
    <div class="app-screen">
            <div id="result"></div>
            <form>
                <label for="username">Gebruikersnaam:</label>
                <input type="text" class="form-control" id="username">
                <label for="password">Wachtwoord:</label>
                <input type="password" class="form-control" id="password">
                <button type="submit" id="submitForm" class="btn btn-default">Log in</button>
            </form>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/post.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

CSS: https://pastebin.com/vDSyqHSu

Working well

when keyboard shows

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

Это потому, что в строке 20 вы должны поставить:

body div.app-screen div.result form {

}

вместо:

.appscreen {

}
0 голосов
/ 18 сентября 2018

Я уверен, что проблема в min-aspect-ratio: 1/1. Без клавиатуры соотношение сторон будет другим. Измените правила внутри этого медиазапроса или попробуйте удалить его.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...