收藏
回答

iOS手机,web页面,当软键盘收起后,页面未下滑恢复,底部有大段空白

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug iOS iOS 12/iOS 13 iphone6/iphoneX 7.0.8/7.0.10

(是微信内的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>
最后一次编辑于  2020-01-22
回答关注问题邀请回答
收藏

2 个回答

  • 龚景龙
    龚景龙
    2023-07-28

    还是有这样的问题,我的页面有两个输入文本,点击输入呼出小键盘时就有很大机率小键盘的区域会变成空白(整个页面高度变小),我现在找到的办法是在点击“登录”按钮时,用focus()把焦点换到另一个输入框,这样整个页面就能恢复正常的高度了。

    2023-07-28
    有用
    回复
  • 灵芝
    灵芝
    2020-01-22

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

    2020-01-22
    有用
    回复 8
    • 高  家  二  少
      高 家 二 少
      2020-01-22
      我问你,我们家的产品,年前能不能处理???
      2020-01-22
      回复
    • new
      new
      2020-01-22
      这个问题很好复现,写个页面放两个输入框在页面上(输入框要比较靠近页面底部,页面高度至少等于屏幕高度),一点就出来了,我相信贵公司的技术人员不出一小时就能把问题复现出来。我们的链接都是加了兼容处理代码的,而且公司也放假了,要不等年后开工的时候我上传一份没有加兼容代码的发给你们吧
      2020-01-22
      回复
    • new
      new
      2020-01-22
      测试链接暂时发不了,我写个了测试页面的代码,添加到问题里了,你查收一下
      2020-01-22
      回复
    • 灵芝
      灵芝
      2020-01-22回复new
      嗯,可以参考以下帖子的解决方案解决问题:
      https://developers.weixin.qq.com/community/develop/doc/0006a49cb5c8383b2fc7680a151800
      https://developers.weixin.qq.com/community/develop/doc/00040a43cd4290dedbc7e7f1851400
      2020-01-22
      回复
    • new
      new
      2020-03-26回复灵芝
      灵芝大佬,你好,问题跟进的怎么样了啊
      2020-03-26
      回复
    查看更多(3)
登录 后发表内容
问题标签