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

从页面本身来看没有什么问题，上传至测试服务器，用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. 学习python之路_入门篇A

    偶尔经同事的介绍进入了金角大王的博客里,看到大王编写的文章都是关于python编程的,由于自己一直也是做软件测试方面的工作,也一直想往自动化测试方面发展,了解到利用python可以进行自动化测试操作, ...

  2. iframe标签的定时刷新

    由于有个项目是大数据类型的,需要时时展现数据,这就出现了这个需求,页面不断刷新,这个其实很简单了,window.location.reload(); 这个就轻松搞定了,但是灵机一动,加上个控制吧,这下 ...

  3. UML系列图

    用例图: 时序图:

  4. 分享Java的9个知识点

    关于java编程的知识,有人会问哪些是重要的知识点,不知道大家是否都知道呢? 现在兄弟连 小编给大家分享以下9点内容,仔细看咯! 1.多线程并发 多线程是Java中普遍认为比较难的一块.多线程用好了可 ...

  5. PHP之防御sql注入攻击的方式

    长期以来,web的安全性存在着巨大的争议与挑战.其中,sql注入就是一种常见的一种攻击方法,开发人员普遍的做法就是不停的过滤,转义参数,可是我们php大法天生弱类型的机制,总是让黑客有机可乘,绕过防御 ...

  6. 用C#语言编写：数组分析器

    static void Main(string[] args)        {            #region 创建数组            Console.Write("请输入数 ...

  7. AngularJs的resource服务与Rest服务交互

    前言以后补: * 在使用resource服务返回的资源对象后具有与后台数据交互的五大接口:save query delete remove get 五种默认行为: { "get": ...

  8. 【Python】 魔法方法

    魔法方法 这个名字真的很中二有没有 = =(或者说翻译气息太浓了,作为一个学外语的看到这种真是想吐槽的不行..) 从形式上来说,在方法的名字前后个加上两条下划线的就是魔法方法了 .从功能上说,所有魔法 ...

  9. Redis --> Redis架构设计

    Redis架构设计 一.前言   Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构,如 字符串(strings), 散列 ...

  10. Spring基于注解开发异常

    基于注解开发: 一开始:用的jar包: 百度查到: 导入aop包: 没用 有的说: Spring版本和jdk版本不匹配 于是我换成了4.0版本 导入的jar包: 还是报错. 解决办法:添加spring ...