Menu
I'm trying to setup my site to open as an app when people add it to their homepage on mobile but it's not working as expected when I have input fields. When the keyboard shows up it stays above the content, it doesn't get resized. It happens only when using via a shortcut on the phone homescreen.
This is my 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"
}
This is my 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>
541
You need to wrap all your content in container with 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>Had this problem lots of times with websites. Usually Element.scrollIntoView() helps. The Element.scrollIntoView() method scrolls the element on which it's called into the visible area of the browser window.
You can bind it to onFocus event of the input.
<input type="text" id="testee" onfocus="getElementById('testee').scrollIntoView()" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
