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

从页面本身来看没有什么问题，上传至测试服务器，用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. HashSet实现不重复储值原理-附源码解析

    在HashSet中,基本的操作都是由HashMap底层实现的,因为HashSet底层是用HashMap存储数据.当向HashSet中添加元素的时候,首先计算元素的hashcode值,然后用这个(元素的 ...

  2. CentOS7.4安装MySQL踩坑记录

    CentOS7.4安装MySQL踩坑记录 time: 2018.3.19 CentOS7.4安装MySQL时网上的文档虽然多但是不靠谱的也多, 可能因为版本与时间的问题, 所以记录下自己踩坑的过程, ...

  3. WordPress中添加自定义评论表情包的方法

    先来看看效果: 现在由于WordPress版本更新,再加上WordPress主题也越来越多,而现在的主题一般都是禁用了WordPress自带的评论表情,其实自带 的评论表情也是很丑的,但是以前我们可以 ...

  4. Python3 多线程编程（thread、threading模块)

    threading是对thread的封装. 1.开启线程: t=threading.Thread(target=sayhi,args=('hh',)) t.start() 或者先建一个Thread的继 ...

  5. window.open打开文件乱码

    问题:刚开始使用window.open在IE兼容模式下打开文件下载出现乱码. 一开始以为是文件名是中文导致的.然后使用a标签的download属性更改文件名解决. <a class=" ...

  6. SpringMvc的传递参数方式 -- url / requestMapping

    在使用spring的项目中,前台传递参数到后台是经常遇到的事, 我们必须熟练掌握一些常用的参数传递方式和注解的使用,废话少说,直接上正文. 1. @requestMapping: 类级别和方法级别的注 ...

  7. spring cloud 专题二（spring cloud 入门搭建 之 微服务搭建和注册）

    一.前言 本文为spring cloud 微服务框架专题的第二篇,主要讲解如何快速搭建微服务以及如何注册. 本文理论不多,主要是傻瓜式的环境搭建,适合新手快速入门. 为了更好的懂得原理,大家可以下载& ...

  8. sentinel监控redis高可用集群（二）

    一.端口转发. 如果在一个主机里面,安装了两个redis实例,可以在项目里面配置IP端口,用iptables转发. iptables -t nat -A PREROUTING -p tcp --dpo ...

  9. Java 后端微信支付demo

    Java 后端微信支付demo 一.导入微信SDK 二.在微信商户平台下载证书放在项目的resources目录下的cert文件夹下(cert文件夹需要自己建) 三.实现微信的WXPayConfig接口 ...

  10. c++ --> sizeof()使用小结

    sizeof()使用小结 特性0:sizeof是运算符,不是函数 sizeof最基本特性,后面的很多特性都是受到这个特性的影响,正因为sizeof不是函数,因此不把它所要求得长度的对象叫做参数,习惯上 ...