移动端背景图软键盘的兼容

本文主要介绍移动端背景图软键盘的界面兼容行问题解决。

1.问题描述，当前端小工程师写背景图的情况下，经常会遇到在谷歌浏览器的调试模式下一切都很ok，结果在真机测试却样式堪忧。比如，背景图被软键盘撑开，用户体验感不佳。
2.关键代码：
login.html

<div class="content-wrap" id="root"> //关键性代码1<div class="main-content"><div class="mui-input-row" id="username"><img src="../img/login_username.png" /> // 此处是登录用户名的字体图标可以自行修改<input type="text" class="mui-input-clear" placeholder="请输入用户名"> //关键性代码2</div></div>
</div>

.content-wrap{background-repeat: no-repeat;background-size: 100% 100%;background-image: url(../../img/login_bg.png); //此路径根据实际情况做调整width: 100%;height: 100%; min-height: 100vh;padding-top: 1.8rem; // 可无视，本文案例是rem的案例text-align: center; // 可无视
}

移动端背景图软键盘的兼容相关推荐

安卓输入法弹出后css横屏,mui开发安卓端，输入法软键盘导致css横屏样式判断触发...
mui开发安卓端,输入法软键盘导致css横屏样式判断触发 mui开发安卓端,输入法软键盘导致css横屏样式判断触发 css 横屏媒体查询 @media screen and (orientation: ...
[iOS] UITextField隐藏软键盘心得（隐藏自身软键盘、点击Return自动转到下个文本框、轻触背景隐藏软键盘）...
作者:zyl910 关于隐藏软键盘,网上的办法良莠不齐,大多是通过实现UITextFieldDelegate来隐藏软键盘,该方法代码较多,且在文本框很多的时不好处理.我经过搜索与摸索,找到了最佳的处理 ...
移动端h5页面软键盘弹出后背景图片被顶上去
移动端h5页面在软键盘弹出后,body的高度被压缩了,就导致原本高度100%的背景图被顶上去一截,需要把div的高度强行设回100%才能解决这个问题 <div class="app&q ...
H5 (React) 移动端监听软键盘弹起、收起
前言:H5 有时底部按钮是固定定位,当页面上面需要用到输入内容时,会弹起软键盘,然后把底部固定的按钮也弹起来了,我们希望弹起软键盘时,底部的固定定位按钮隐藏,这里就需要对移动端软键盘弹起收起进行监听. ...
mui开发安卓端，输入法软键盘导致css横屏样式判断触发
css 横屏媒体查询 @media screen and (orientation:landscape) {} 一般情况下无问题,写了就不用纠结手机对比度问题,但是!竖屏模式下,如果打开软键盘,小屏幕 ...
vue实现移动端自动弹起软键盘
移动端显示输入框框直接focus不会弹出软键盘解决思路我们让点击的时候可以通过点击label关联input,这个input(input1)不要通过display:none, 隐藏,我们要通过 di ...
h5 移动端监听软键盘弹起、收起
前面一篇博客 h5 安卓键盘弹起界面适配修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化 window.onresize事件来做突破点的,但是i ...
h5(移动端) 监听软键盘弹起、收起
https://blog.csdn.net/qq_38296051/article/details/109290225 https://blog.csdn.net/qq_42231156/articl ...
H5页面移动端背景图以及文字适配方法
H5页面适配的方法背景的适配给页面设置背景图,因为适配不同的设备(设备屏幕分辨率不同),所以再给背景图宽高的时候不能全部给100% 背景图(ui设计图)的比例是固定的,这里举例750px*1468 ...

移动端背景图软键盘的兼容

移动端背景图软键盘的兼容相关推荐

最新文章

热门文章