iOS手机,web页面,当软键盘收起后,页面未下滑恢复,底部有大段空白
发布于 6 年前 作者 pingsun 13607 次浏览 来自 问答

(是微信内的web页面,提交问题时非让选框架类型,只能选小程序了)我能说同样的页面在支付宝客户端打开就没问题吗?在ios自带的safari浏览器打开也没问题,希望微信的技术大佬能解决一下这个问题,我看社区在2018年就有人反应过这个问题,这都2020年了,问题依然存在,哎,不说了

不能给测试链接,把测试代码加上吧

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="format-detection" content="email=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="full-screen" content="yes">
  <meta name="browsermode" content="application">
  <meta name="x5-orientation" content="portrait">
  <meta name="x5-fullscreen" content="true">
  <meta name="x5-page-mode" content="app">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>测试代码</title>
  <style>
  *{
    padding: 0;
	margin: 0;
  }
  html,body{
    width: 100%;
	height: 100%;
  }
  #app{
    width: 100%;
	height: 100%;
	background:#ff8b03;
  }
  .section-top{
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
	padding-top: 300px;
  }
  .form-group{
    box-sizing: border-box;
    width: 100%;
  }
  .input-group{
    box-sizing: border-box;
    display: flex;
    height:44px;
    margin-bottom: 16px;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    background:rgba(255,240,241,1);
    border-radius:8px;
  }
  .input-item{
      text-align: left;
      flex: 1 1 auto;
      height: 100%;
      font-size: 14px;
      padding: 0 0 0 1em;
   }

  </style>
</head>

<body>
  <div id="app">
    <div class="section-top">
      <div class="form-group">
        <div class="input-group">
          <input class="input-item" maxlength="11" type="tel" placeholder="请输入手机号" />
        </div>
        <div class="input-group">
          <input class="input-item" maxlength="4" type="tel" placeholder="请输入短信验证码" />
        </div>
      </div>
    </div>
  </div>
  
  <script type="text/javascript"></script>
</body>

</html>
1 回复

麻烦提供能复现问题的测试链接看下

回到顶部