手机软键盘弹出时影响布局的解决方法

移动端软键盘弹出时影响布局该如何解决

1）前段时间作的移动端页面，因为高度只有1页所以用了height:100%;width:100%;

ios下点击输入框弹出软键盘时，布局没有大影响。

当输入框可能被软键盘压到时，在一部分安卓下却出了问题，华为自带浏览器和UC会有布局上的问题。

原因可能是因为，软键盘弹出时，改变了height，使height:100%,不能达到原来的高度。

解决办法：

$(document).ready(function () {
　　$('body').height($('body')[0].clientHeight);
});

页面加载完后，js给body一个定高。

2）以前还遇到过，移动端点击输入框时，页面向左偏移了一部分，但太久了，忘了什么浏览器了，重现不了，解决的方法是使输入框的大小居中.

PS:吐槽下华为自带浏览器和UC不识别css3的新单位，vw,vh.

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • Android 显示和隐藏软键盘的方法(手动)

    Android 显示和隐藏软键盘的方法(手动)

    在Android开发中,经常会有一个需求,做完某项操作后,隐藏键盘,也即让Android中的软键盘不显示.今天,和大家分享如何利用代码来实现对Android的软件盘的隐藏.显示的操作. 1.方法一(如果输入法在窗口上已经显示,则隐藏,反之则显示) InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE); imm.toggleSoftInput(0, InputMeth

  • JS实现自定义简单网页软键盘效果代码

    JS实现自定义简单网页软键盘效果代码

    本文实例讲述了JS实现自定义简单网页软键盘效果.分享给大家供大家参考,具体如下: 这是一款自定义的简单点的网页软键盘,没有使用任何控件,仅是为了练习JavaScript编写水平,安全性方面没有过多考虑,有顾虑的可以不用,目的是学习,希望对您有用处. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-web-keybord-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • Android中监听软键盘显示状态实现代码

    /**监听软键盘状态 * @param activity * @param listener */ public static void addOnSoftKeyBoardVisibleListener(Activity activity, final OnSoftKeyBoardVisibleListener listener) { final View decorView = activity.getWindow().getDecorView(); decorView.getViewTree

  • Android软键盘弹出时的界面控制方法

    本文实例讲述了Android软键盘弹出时的界面控制方法.分享给大家供大家参考,具体如下: 有时候androidactivity弹出软键盘后布局改变 下面有三种模式可以改变软键盘弹出以后的显示形式 模式一:压缩模式软键盘弹出以后,会压缩原先的大小 我们可以在AndroidManifet.xml中对Activity进行设置.如: android:windowSoftInputMode="stateUnchanged|adjustResize" 模式二:平移模式 软键盘弹出以后,不会压缩原先

  • 解析android中隐藏与显示软键盘及不自动弹出键盘的实现方法

    1.//隐藏软键盘    ((InputMethodManager)getSystemService(INPUT_METHOD_SERVICE)).hideSoftInputFromWindow(WidgetSearchActivity.this.getCurrentFocus().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS); 2.//显示软键盘,控件ID可以是EditText,TextView    ((InputMethodMa

  • Android屏蔽EditText软键盘的方法

    本文实例讲述了Android屏蔽EditText软键盘的方法.分享给大家供大家参考.具体如下: java代码如下: InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE); imm.hideSoftInputFromWindow(myEdit.getWindowToken(), 0); //myEdit是你的EditText对象 可以通过下面方法恢复显示: boolea

  • Android WebView无法弹出软键盘的原因及解决办法

    requestFoucs();无效. requestFoucsFromTouch();无效. webview.setTouchListener:无效. 问题所在: 继承WebView时,注意构造方法: public CommonWebView(Context context) { super(context); init(); } public CommonWebView(Context context, AttributeSet attrs) { super(context, attrs);

  • jquery比较简洁的软键盘特效实现方法

    jquery比较简洁的软键盘特效实现方法

    本文实例讲述了jquery比较简洁的软键盘特效实现方法.分享给大家供大家参考.具体实现方法如下: 运行效果图如下: 1. html主要部分如下: 复制代码 代码如下: <div id="container">  <textarea id="write" rows="6" cols="60"></textarea>  <ul id="keyboard">   &

  • Js之软键盘实现(js源码)

    Js之软键盘实现(js源码)

    鉴于安全性的考虑,不少网站在登录输入密码时都采用了软键盘,避免一些键盘记录工具和木马对击键的捕捉.项目中也有这个需求,就分享给大家了,贴个效果图上来..有兴趣的朋友可以收藏....如果觉得功能有点庞大,只需要数字小键盘的朋友,可参考代码精简.下载大键盘: http://www.cnblogs.com/Files/sccxszy/softKey.rar小键盘:http://www.cnblogs.com/Files/sccxszy/smallSoftkey.rar小键盘: 效果还原:Default

  • 基于jquery的多功能软键盘插件

    基于jquery的多功能软键盘插件

    支持查询功能的键盘和简单得软键盘,键盘样式完全在独立的css文件中定义,可以自行美化. (支持从查询的软键盘) (简单的软件盘) 插件的默认参数 复制代码 代码如下: jquery.fn.softkeyboard.defaults = { names: { _delbtn: "skbdel", _clearbtn: "skbclear", _querybtn: "skbquery", _closebtn: "skbclose"

随机推荐