时间戳

首页 > 解决方案 > 如何在android（manifest.json）上修复键盘上方的内容

android - 如何在android（manifest.json）上修复键盘上方的内容

问题描述

我正在尝试将我的网站设置为当人们将其添加到他们在移动设备上的主页时作为应用程序打开，但是当我有输入字段时它无法按预期工作。当键盘出现时，它停留在内容上方，不会调整大小。只有通过手机主屏幕上的快捷方式使用时才会发生这种情况。

这是我的 manifest.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>

标签： androidhtmlcssmobile

解决方案

网站多次遇到这个问题。通常Element.scrollIntoView() 会有所帮助。Element.scrollIntoView() 方法将调用它的元素滚动到浏览器窗口的可见区域。

您可以将其绑定到onFocus输入事件。

 <input type="text" id="testee" onfocus="getElementById('testee').scrollIntoView()" />

推荐阅读