最近切微信页面的时候，发现移动端的登录页面，带输入框的那种，如图：

从页面本身来看没有什么问题，上传至测试服务器，用iphone访问也没有什么问题，但是当同事用Android手机获取焦点后，问题来了，

软键盘调出后，输入框整体都被挤到了页面上方，内容覆盖了logo，页面瞬间low毙。

然后各种改，把上移的那部分固定定位、js各种控制高度，然鹅都没有很好的起作用。经过各种度娘和尝试，终于恢复正常

终于是整个页面背景上移，而不仅仅是内容上移了。贴代码，重点都在标记部分

问题解决，so easy，希望能帮到大家！

移动端登录页面input获取焦点后页面布局及输入框上移的问题的更多相关文章

  1. 兼容h5在ios上登录窗口input失焦后页面不会滚

    $("#logincode").blur(function(){ //滚动到顶部 window.scrollTo(0, 0); })一般多用于密码框失焦后,页面不回滚

  2. web移动端Fixed在Input获取焦点时ios下产生的BUG及处理

    1.现象 可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意 ...

  3. EasyUI在MVC4中需要部分刷新页面时load()后页面变形问题！

    最近在使用MVC4与EasUI过程中遇到些容易导致界面变形的问题,纠结了很久,但其实当发现问题在哪里时,倒觉得最终还是自己对MVC4的概念没把握好,OK,show time.  本示例Contact ...

  4. 移动端H5页面 input 获取焦点时，虚拟键盘挡住input输入框解决方法

    在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...

  5. 移动端 input 获取焦点后弹出带enter(类似于搜索，确定，前往)键盘，以及隐藏系统键盘

    一:调出系统带回车键的键盘 在项目中经常有输入框,当输入完成后点击确定执行相应的动作.但是有些设计没有确定或者搜索按钮,这就需要调用系统键盘,点击系统键盘的确定后执行相应动作. 但是单纯的input是 ...

  6. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  7. iOS 固定定位不兼容、input获取焦点后位置不对。

    第一次写博客~  大家悠着看,有则改之,无则加冕,对不对的给个回复,让我知道你的存在. 在做活动页的时候,经常会碰到一些需要弹出显示的输入框(情节前提:本人安卓机~),前天自己写的时候自己调试没问题后 ...

  8. Django项目：CRM(客户关系管理系统)--55--46PerfectCRM实现登陆后页面才能访问

    #urls.py """PerfectCRM URL Configuration The `urlpatterns` list routes URLs to views. ...

  9. (转)完美解决 Android WebView 文本框获取焦点后自动放大有关问题

    完美解决 Android WebView 文本框获取焦点后自动放大问题 前几天在写一个项目时,要求在项目中嵌入一个WebView 本来很快就完成了,测试也没有问题.但发给新加坡时,他们测试都会出现文本 ...

随机推荐

  1. Ubuntu上将终端安装到右键上

    Ubuntu上将终端安装到右键上 author:headsen chen    2017-10-12  10:26:12 个人原创,允许转载,请注明作者和出处,否则依法追究法律责任 chen@chen ...

  2. ArrayList源码解析（JDK1.8）

    package java.util; import sun.misc.SharedSecrets; import java.util.function.Consumer; import java.ut ...

  3. 通向架构师的道路之 Tomcat 性能调优

    一.总结前一天的学习 从"第三天"的性能测试一节中,我们得知了决定性能测试的几个重要指标,它们是: 吞吐量 Responsetime Cpuload MemoryUsage 我们也 ...

  4. Android_Jar mismatch! Fix your dependencies

    在用adt开发安卓时,添加依赖的library后,经常会出现错误,Jar mismatch! Fix your dependencies 这个错误的原因是.出现了不同版本的jar包(例如:V4包版本不 ...

  5. PHP 设计模式阅读清单

    社区文章推荐 S.O.L.I.D 面向对象设计和编程(OOD&OOP)笔记 浅谈 Laravel 设计模式 PHP 完整实战 23 种设计模式 Laravel Dependency Injec ...

  6. DataTables ajax + bootstrap 分页/搜索/排序/常见问题

    最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...

  7. jsp pageEncoding属性详解

    Java pageEncoding原理详解 首先看下文章解释: 意思是jsp文件本身的编码 巨大的疑问:这里有一个很大的问题,既然你都已经从jsp中读到了这条属性,证明内容读取正确,那你还需要知道这条 ...

  8. 自定义ArrayList

    自定义实现ArrayList很简单,只需要明白下面几点 1.ArrayList 底层是由数组组成的 2.数组有容量限制,但是ArrayList并没有(实际上也有,Integer.MAX_VALUE). ...

  9. sqlplus 的安装和配置

    sqlplus :  oracle公司提供用户操作oracle数据库的工具. 安装所需的包:  1.oracle 客户端    2.sqlplus工具 官方下载地址  http://www.oracl ...

  10. 项目Beta冲刺第二天

    1.昨天的困难,今天解决的进度,以及明天要做的事情 昨天的困难:昨天主要是在确认需求方面花了一些时间,后来终于确认了企业自查风险模块的需求问题 今天解决的进度:根据昨天确认下来的需求,我们基本上完成了 ...