文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

微信 H5 页面兼容性解决方案

（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部 解决办法：高度height和行高line-height...【有待考证】 解决办法：只需要在公共样式加入下面这行代码 *{ -webkit-overflow-scrolling: touch; } But，这个属性是有bug的，比如如果你的页面中有设置了绝对定位的节点...3、ios键盘唤起，键盘收起以后页面不归位 问题详情描述： 输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑 出现原因分析： 固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位...失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件 解决办法： 键盘的时候会被顶上去，特别是第三方键盘 4、安卓弹出的键盘遮盖文本框 问题详情描述： 安卓微信H5弹出软键盘后挡住input输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子

4.1K30

【H5】344- 微信 H5 页面兼容性解决方案

（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部 解决办法：高度height和行高line-height...【有待考证】 解决办法：只需要在公共样式加入下面这行代码 *{ -webkit-overflow-scrolling: touch; } But，这个属性是有bug的，比如如果你的页面中有设置了绝对定位的节点...3、ios键盘唤起，键盘收起以后页面不归位 问题详情描述： 输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑 出现原因分析： 固定定位的元素 在元素内 input 框聚焦的时候...弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件 解决办法： 键盘的时候会被顶上去，特别是第三方键盘 4、安卓弹出的键盘遮盖文本框 问题详情描述： 安卓微信H5弹出软键盘后挡住input输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子

3.4K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    微信H5页面兼容性解决方案

    （谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部 解决办法：高度height和行高line-height...【有待考证】 解决办法：只需要在公共样式加入下面这行代码 *{ -webkit-overflow-scrolling: touch;} But，这个属性是有bug的，比如如果你的页面中有设置了绝对定位的节点...3、ios键盘唤起，键盘收起以后页面不归位 问题详情描述： 输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑 出现原因分析： 固定定位的元素 在元素内 input 框聚焦的时候...弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件 解决办法： 键盘的时候会被顶上去，特别是第三方键盘 4、安卓弹出的键盘遮盖文本框 问题详情描述： 安卓微信H5弹出软键盘后挡住input输入框，如下左图是期待唤起键盘的时候样子，右边是实际唤起键盘的样子

    4.1K43

    H5页面前端开发常见的兼容性问题解决方法

    例如下图，左图是正常所期待的输入框光标，右边是IOS的 input 光标。 解决办法：高度height和行高line-height内容用padding撑开。...IOS键盘唤起，键盘收起以后页面不归位 问题描述：输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑。 解决办法：在输入框失失去焦点的时候添加一个事件，让页面回滚。...安卓弹出的键盘遮盖文本框 问题描述：安卓微信H5弹出软键盘后挡住input输入框，看不到输入的字符。如下左图是期待唤起键盘的时候样子，右边是实际唤起键的样子。...解决办法：给input和textarea标签添加focus事件，先判断是不是安卓手机下的操作，当然，也可以不用判断机型，Document 对象属性和方法setTimeout延时0.5秒，因为调用安卓键盘有一点迟钝...如下图中的第二个分享就是有问题的，而第一个分享是正常的。 解决办法： 1.

    3.6K11

    h5软键盘挡住输入框问题解决（android）

    在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题，ios可自身弹起（ios自身的调整偶尔也会出问题，例如第三方键盘会遮挡，原因是第三方输入法的tool bar或者键盘也被当做可视区域...第二种会出现遮挡问题 于是想到以下两种方案： 1.通过动态增加页面高度和设置scrollTop来使输入框到达合适的位置 2.设置相对定位，通过top来使输入框到达合适的位置 影响实现的两个点： 1.js...拿不到键盘的弹出和收起事件; 2.覆盖一层的键盘弹出方式不会触发window.resize事件和onscroll事件。...（目前没找到解决办法） 后续 1.由于android弹出键盘存在一定延迟，所以可以给top更改添加setTimeout，设置合适的延迟时间。...2.两个h5框架，iScroll、Native.js（虽然在这个问题上没啥用） 3.最终奥义：修改设计稿，三招 -> 使输入框不在页面的下半部分、采用分页设计、弹出输入层（ps：要和产品和设计沟通，客户不一定会让步

    8.2K10

    关于H5在移动端弹出下拉选项时遮挡输入框的问题

    背景 在最近的一个Hybrid App项目中，我实现的H5有以下两个需求： 使用quill.js实现富文本编辑器，但是，工具栏需要固定定位到底部，当输入法弹出时，工具栏需要悬浮在输入法键盘之上，如下图所示...，键盘未弹出时，webview的高度 = 左图蓝色框的高度，当键盘弹出时，webview的高度 = 右图蓝色框的高度 - 红色框键盘的高度，也就是说webview的高度为绿色框的高度 ios上：webview...的高度不会随着键盘的弹出而发生改变，始终是左图蓝色框的高度 综上，当工具栏使用fixed来定位时，在android上，当键盘弹出时webview的高度会减小，所以工具栏会悬浮在键盘之上，也就是说，在android...但是，ios不会改变webview的高度，因此，当键盘弹出时，工具栏始终位于屏幕底部，从而被键盘遮挡，如此就不符合需求，所以，需要针对ios做特别处理 ios上的解决方案 有以下三种解决方案： 改设计：...app端，当键盘弹出时，通过事件告知H5键盘的高度，然后H5根据webview的高度和键盘的高度动态的计算工具栏的位置，将其定位到键盘之上。

    6.4K30

    HarmonyOS 开发实践 —— 如何定位解决焦点问题

    不可获焦状态下，无法触发 焦点事件 如图：Text开启了获焦能力，想要焦点在Text上，要触发主动走焦。enableKeyboardOnfocus：通过点击以外方式获焦时，控制是否弹出键盘。...比如：页面初次构建完成时，使TextInput默认获取焦点，但不希望弹出键盘，则可以设置enableKeyboardOnfocus为false。2、主动获取焦点若组件本身有获焦能力，默认可获焦。...以下方法直接使用；若组件本身有获焦能力，默认不可获焦。...规则如下：带* 号的节点都是当前获焦节点带(-)的节点，表示该节点不可获焦不带(-)的节点，表示该节点可获焦查看焦点与键盘联动日志实际更复杂的焦点场景，包括了焦点和窗口的联动、焦点唤醒键盘等真机上测试，...根据关键词AceFocus|AceKeyboard，过滤出焦点和键盘的日志写在最后如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：点赞，转发，有你们的 『点赞和评论』，才是我创造的动力；关注小编

    1.2K21

    安卓ios兼容问题及处理（小程序H5）

    有个属性 var layoutMargins: UIEdgeInsets ， 如果一个View是ViewController的rootview，系统会自动设置和管理margins ， top和bottom...解决办法： 给input设置lineline-height来让输入内容居中或者上下偏移是不可取的，推荐使用padding撑开高度 input{ padding:30rpx; &::placeholder...安卓/IOS图片卡顿异形 问题 ：安卓上图片会出现卡顿，变形，然后才会显示正常的图片大小 原因： image组件默认宽度300px、高度225px 解决办法： 使用image 标签，尽量固定宽高。...键盘弹出异常 问题： ios上键盘弹出会将页面往上顶 安卓显示正常 原因： ios上的软键盘会使页面的fixed定位失效。...解决办法： 可以监听resize事件（浏览器窗口大小调整时触发），当键盘弹出的时候，更改页面的position属性值。

    8.9K71

    Android爬坑之旅：软键盘挡住输入框问题的终极解决方案

    最基本的情况，如图所示：在页面底部有一个EditText，如果不做任何处理，那么在软键盘弹出的时候，就有可能会挡住EditText。...而在H5、Hybrid几乎已经成为App标配的时候，我们经常还会碰到的情况是：软键盘是由WebView中的网页元素所触发弹出的。...3.界面变化之后，获取"可用高度" 当软键盘弹出了之后，接下来的事情是获取改变之后的界面的可用高度（可以被开发者用以显示内容的高度）。...因为能触发OnGlobalLayout事件的原因有很多，不止是软键盘的弹出变化，还包括各种子View的隐藏显示变化等，它们对界面高度的影响有限。...加上了这个判断之后，只有界面的高度变化超过1/4的屏幕高度，才会进行重新设置高度，基本能保证代码只响应软键盘的弹出。

    6K20

    移动端H5 input输入完成后页面底部留白问题

    说明 最近在用vue写几个H5页面在微信上展示，遇到一个在弹窗上input输入完成之后点击键盘的完成，页面底部留出一片空白的问题 [20190521155136.png] 出现原因分析 当键盘抬起时，window.scrollY...会从0变到键盘的高度，所以解决办法就是当input失去焦点的时候，将window.scrollY重新设置为0 解决 给所有的input``textarea组件设置获取焦点和设置焦点事件，失去焦点的时候将...behavior: 'smooth' }); }, 300); window.scrollTo(0, 0); } 补充:解决方案3 //解决键盘弹出后挡表单的问题...本来iOS是做了这方面的优化，在软键盘弹出和收起时页面会smooth的平滑，由于我加了scrollIntoView破坏了原生的优化导致弹跳了handleFocus(event) { clearTimeout...window.pageXOffset = 0; document.documentElement.scrollTop = 0; }, 100); }最后 解决: 本文首发于:移动端H5

    1.5K20

    鸿蒙开发实战案例：组件随软键盘弹出避让案例

    介绍本示例介绍使用TextInput组件和LazyForEach实现组件随软键盘弹出避让场景。该场景多用于需要用户手动输入文字类应用。...效果图预览使用说明进入案例时，TextInput获焦，弹出系统键盘，点击空白地方键盘收起；点击输入框触发TextInput获焦，弹出系统键盘；点击“弹出键盘”按钮触发TextInput获焦，弹出系统键盘...自动获焦，完成进入案例自动拉起键盘；场景二：TextInput组件拥有点击获焦能力，输入框使用TextInput组件即可实现点击输入框弹出系统键盘；场景三：通过使用focusControl.requestFocus...API实现textInput获焦拉起键盘；场景四：通过设置setKeyboardAvoidMode API，将页面的避让模式设置为RESIZE模式，,即可实现键盘拉起时组件上抬避让场景；场景五 ：通过监听键盘高度...写在最后如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：点赞，转发，有你们的 『点赞和评论』，才是我创造的动力；关注小编，同时可以期待后续文章ing，不定期分享原创知识；想要获取更多完整鸿蒙最新学习知识点

    71820

    鸿蒙开发：如何解决软键盘弹出后的间距

    有问题，就会有解决问题的办法，经过一系列的研究，其实解决起来也十分的简单，总结了有三种方式，大家可以选择适合的方式。...window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR let avoidArea = win.getWindowAvoidArea(type) // 获取到导航条区域的高度...监听软键盘弹出状态无非就是把输入框的输入状态切换为了软键盘的弹出状态。...我真实服了这个老六，无非就是换了一个监听方式，怎么还给了一个惊喜呢，针对这种情况，建议直接使用第一种方式，当然了，如果你仍然要用这种方式，也不是不行，软键盘弹出后，需要加上被遮挡的高度，也就是44px。...px2vp(44) : this.bottomRectHeight })方式三、动态设置位置所谓的动态设置，就是根据软键盘的高度，动态设置组件的位置，也就是需要获取软键盘的高度，当软键盘弹起时

    51600

    移动端H5 input输入完成后页面底部留白问题

    Contents 1 说明 2 出现原因分析 3 解决 4 补充:解决方案2 5 补充:解决方案3 6 补充:页面来回弹跳 7 最后 说明 最近在用vue写几个H5页面在微信上展示，遇到一个在弹窗上...input输入完成之后点击键盘的完成，页面底部留出一片空白的问题 ?...出现原因分析 当键盘抬起时，window.scrollY会从0变到键盘的高度，所以解决办法就是当input失去焦点的时候，将window.scrollY重新设置为0 解决 给所有的input``textarea...behavior: 'smooth' }); }, 300); window.scrollTo(0, 0); } 补充:解决方案3 //解决键盘弹出后挡表单的问题...本来iOS是做了这方面的优化，在软键盘弹出和收起时页面会smooth的平滑，由于我加了scrollIntoView破坏了原生的优化导致弹跳了 解决: handleFocus(event) { clearTimeout

    1.1K20

    H5直播避坑指南

    解决方案： 1.在弹出会显示在视频上方dom的时候暂停视频播放 2.将视频所在的dom的父元素的高度设为1 3.处理完弹出的事件后将视频所在的父元素高度还原 4....这种接管的后果是这时的我们是没有办法控制视频的播放，也没有办法在上面浮动我们的dom元素，如弹幕，礼物这些，会完全被视频盖在下面，所以我们的目标即是解决这种系统接管的问题 3）使用伪全屏（样式全屏）...的高度来实现旋转全屏。...这种模式的显示没有太大问题，但因为是通过css控制的页面dom显示，对于原生的空间不能很好的控制，如系统的键盘 ?...在拉起键盘输入弹幕的时候，键盘不受控制还是竖屏显示了 如果页面不涉及与原生组件的交互，那么这种方案是一种很可行且兼容性比较好的方案 2.用户在点击全屏时，通过js api来控制webview旋转横屏

    11.8K151

    iOS 12.0 WebView键盘弹出，关闭后界面没有回收的问题

    iOS 12.0 WebView键盘弹出，关闭后界面没有回收的问题 背景 公司有人反馈，iOS 12.0的手机上，H5页面有个地方键盘弹出了，关闭之后，再次点击输入框，没有反应了，其实是界面上移了之后，...，添加iOS 12.0之后，设置 contentInsetAdjustmentBehavior 为 UIScrollViewContentInsetAdjustmentAutomatic，设置了之后，键盘的问题解决了...，但是又出现新的问题，iPhone X系列的全面屏的适配，之前H5页面body写的height:100%的地方，会显示高度不对。...，在H5界面监听键盘弹出和收起，在收起时，对webview的scrollview做偏移处理，设置后，发现对笔者的项目来说仍旧不生效，笔者的项目同一个网页上有多个可输入的地方，且有在弹出框输入的操作。...故而再次修改： 笔者发现，有人给出参考方法，由H5端，监听键盘弹起和回收，然后进行处理，但是如果让H5处理，需要每个业务的H5都要单独处理，所以笔者就想，由原生监听键盘收起的通知，然后调用js的方法，代码如下

    3.2K20

    H5直播避坑指南

    _5113_1498530055451.png] 解决方案： 1.在弹出会显示在视频上方dom的时候暂停视频播放 2.将视频所在的dom的父元素的高度设为1 3.处理完弹出的事件后将视频所在的父元素高度还原...的webkitRequestFullScreen方法来进入视频的全屏，那么这个方法会使浏览器完全接管视频播放，如图所示 [1498530657116_1050_1498530656629.jpg] 这种接管的后果是这时的我们是没有办法控制视频的播放...，也没有办法在上面浮动我们的dom元素，如弹幕，礼物这些，会完全被视频盖在下面，所以我们的目标即是解决这种系统接管的问题 3）使用伪全屏（样式全屏） 样式全屏的核心是设置video标签的宽高，使其撑满整个...dom元素旋转显示 通过-webkit-transform: rotate(90deg)并设置video的高度为当前webview的宽度，video的宽度为当前webview的高度来实现旋转全屏。...这种模式的显示没有太大问题，但因为是通过css控制的页面dom显示，对于原生的空间不能很好的控制，如系统的键盘 [1498530770240_8865_1498530770152.png] 在拉起键盘输入弹幕的时候

    6.4K130

    H5 直播避坑指南

    解决方案： 1.在弹出会显示在视频上方dom的时候暂停视频播放 2.将视频所在的dom的父元素的高度设为1 3.处理完弹出的事件后将视频所在的父元素高度还原 4....这种接管的后果是这时的我们是没有办法控制视频的播放，也没有办法在上面浮动我们的dom元素，如弹幕，礼物这些，会完全被视频盖在下面，所以我们的目标即是解决这种系统接管的问题 3）使用伪全屏（样式全屏）...的高度来实现旋转全屏。...这种模式的显示没有太大问题，但因为是通过css控制的页面dom显示，对于原生的空间不能很好的控制，如系统的键盘 ?...在拉起键盘输入弹幕的时候，键盘不受控制还是竖屏显示了 如果页面不涉及与原生组件的交互，那么这种方案是一种很可行且兼容性比较好的方案 2.用户在点击全屏时，通过js api来控制webview旋转横屏

    3.6K90

    移动端那些戳中你痛点的软键盘问题及解决方法

    当时找了一圈方法，觉得并没有合适的解决方法，退而求其次，既然h5无没有办法很好的解决吸顶问题，那么这个能力不如就用客户端的能力好了，客户端的header不属于webview内容，自然webview上推时...衍生问题解决办法 之前header头用的是前端自己写的header时，没有这个问题，推测是因为安卓手机在键盘弹起时的webview高度缩短为整个屏幕的高度减去键盘的高度， 在之前的实现中，由于使用沉浸式...所以解决办法就是让键盘弹起时，添加吸底按钮以及底部元素的margin-bottom为header的高度就行。...2、吸底元素（也就是按钮）能够在键盘弹出之后，出现在键盘的上方 对于这个问题，因为安卓表现是webview缩小，所以在安卓上并不存在这个问题，对于ios，因为ios向上滚动的距离最大是键盘的高度，但是也有可能滚动距离不是键盘高度...这其实可能只适用于我这种情景，这个解决办法的原理是：scrollIntoView(true)想让输入框的顶部滚动到与可视区顶部齐平的效果，但是由于ios键盘弹起之后最大滚动距离等于键盘的高度，所以，通过这个方法会让

    10.9K30

    安卓H5页面软键盘顶起页面底部

    最近在维护一些老的页面，发现有一个解决安卓输入法软键盘导致页面布局异常的写法挺好的，跟大家分享一下1....背景 做过移动端开发的话，大家肯定都遇到过各种移动端的兼容问题，例如IOS的fixed问题，不同系统浏览器API的兼容问题等。...今天我们要讨论的也是一个兼容性问题，当安卓h5页面里遇到输入框的时候，输入法弹出的时候，浏览器会调整布局，导致底部的UI被顶上来，具体如下图图片 这里页面的代码其实很简单，就是一个输入框，一个fixed...解决方案 网上有不少解决这个问题的办法，大致的思路就是通过JS监听高度的改变，来确定输入法是不是弹出了，然后对不希望展示的内容做特殊的处理。...例如这篇文章就写得很好移动端那些戳中你痛点的软键盘问题及解决方法 - 掘金 (juejin.cn) 但是其实有更简单的办法可以解决，通过媒体查询可以纯CSS就解决这个问题。

    5.3K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券