<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<title>启动</title>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" />
<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,user-scalable=no" />
</head>
<body>
<div>
<header>输入框在最下面</header>
<content>
<div></div>
<p>输入框1 <input type="text" value="some words" /></p>
</content>
<footer>
<p>输入框2 <input type="text" value="some words" /></p>
</footer>
</div>
<style>
html,
body,
body>div {
width: 100%;
height: 100%;
overflow: hidden;
}
body>div {
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
position: absolute;
flex-direction: column;
justify-content: space-between;
contain: layout size style;
overflow: hidden;
z-index: 0;
}
header {
padding-top: 32px;
text-align: center;
background-color: cadetblue;
}
content {
flex: auto 1;
background-color: azure;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
content>div {
height: 200vh;
background: linear-gradient(to top right, #00ff00, #ff00ff);
}
footer {
background-color: darkgoldenrod;
}
</style>
<script type="text/javascript">
document.addEventListener('plusready', function () {
plus.navigator.closeSplashscreen();
}, false);
</script>
</body>
</html>
- 发布:2020-05-12 21:14
- 更新:2020-05-12 21:14
- 阅读:784
产品分类: HTML5+
HBuilderX版本号: 2.6.16
手机系统: iOS
手机系统版本号: iOS 13.4
手机厂商: 苹果
手机机型: iphone 11
打包方式: 离线
示例代码:
操作步骤:
1、使用SDK自带的Hello应用
2、将control.xml配置的项目Id更改为 HelloH5
3、使用示例代码替换 apps/HelloH5/www/index.html内容
4、启动应用,点击输入框,次时header会消失,因为webview的高度并没有随着键盘的呼出变化
5、手动设置当前webiview的高度,可以解决这个问题。再次验证设置未生效。
1、使用SDK自带的Hello应用
2、将control.xml配置的项目Id更改为 HelloH5
3、使用示例代码替换 apps/HelloH5/www/index.html内容
4、启动应用,点击输入框,次时header会消失,因为webview的高度并没有随着键盘的呼出变化
5、手动设置当前webiview的高度,可以解决这个问题。再次验证设置未生效。
预期结果:
应该将当前webview的高度调整为屏幕尺寸减去键盘高度,表现为和android一样的情况
应该将当前webview的高度调整为屏幕尺寸减去键盘高度,表现为和android一样的情况
实际结果:
webview并不会随着键盘的弹出,自动更改高度
webview并不会随着键盘的弹出,自动更改高度
bug描述:
"softinputMode": "adjustResize" 模式无效,webview并不会随着键盘的弹出,自动更改高度。导致header区域溢出可视区域。