Как починить клавиатуру над контентом на андроиде (manifest.json) - PullRequest
0 голосов
/ 18 января 2019

Я пытаюсь настроить свой сайт, чтобы он открывался как приложение, когда люди добавляли его на свою домашнюю страницу на мобильном телефоне, но он не работает должным образом, когда у меня есть поля ввода. Когда клавиатура появляется, она остается над содержимым, она не изменяется. Это происходит только при использовании через ярлык на домашнем экране телефона.

Это мой манифест.json:

{
  "author": "My Name",
  "background_color": "#ffffff",
  "description": "App",
  "display": "fullscreen",
  "icons": [
    {
      "src": "https://192.168.26.183:8080/img/web-app.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "manifest_version": 2,
  "name": "App",
  "orientation": "portrait",
  "short_name": "App",
  "start_url": "https://192.168.26.183:8080/",
  "theme_color": "#ffffff",
  "version": "0.1"
}

Это мой HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<!-- Ask user to add to home screen -->
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="manifest" href="manifest.json">
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body,
		html {
			height: 100%;
		}
		.teste {
			height: calc(100% - 10px);
			width: 100%;
			content: '';
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="teste"></div>
	<input type="text" id="texteeee">
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Много раз сталкивался с этой проблемой на сайтах. Обычно Element.scrollIntoView () помогает. Метод Element.scrollIntoView () прокручивает элемент, для которого он вызывается, в видимую область окна браузера.

Вы можете привязать его к onFocus событию входа.

 <input type="text" id="testee" onfocus="getElementById('testee').scrollIntoView()" />
0 голосов
/ 23 января 2019

Вам нужно обернуть весь ваш контент в контейнер с position: absolute;

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <!-- Ask user to add to home screen -->
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <link rel="manifest" href="manifest.json">
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body,
            html {
                height: 100%;
            }
            .wrapper {
              position: absolute;
              width: 100%;
              height: 100%;
              overflow: auto;
            }
            .teste {
                height: calc(100% - 20px);
                width: 100%;
                content: '';
                background-color: red;
            }
        </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="teste"></div>
        <input type="text" id="texteeee">
      </div>
    </body>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...