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

从页面本身来看没有什么问题，上传至测试服务器，用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. Problem : 1196 ( Lowest Bit )

    第一次一次通过,逻辑太简单... #include<iostream> using namespace std; void main() { int n; while(cin>> ...

  2. Unity中List的随机排序（乱序）

    为什么要给List排序做一个Unity限定条件呢 首先,是C#中的List泛型,若是Java,直接调用Collection.shuffle()就OK了 而Unity的C#版本较低,不能使用Random ...

  3. spring boot整合log4j2

    POM配置 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http: ...

  4. 世界上最好的语言搭建短链接及统计功能(附API代码)

    前言 在这个营销的时代,短链接和二维码是企业进行营销中非常重要的工具,不仅仅是缩短了链接,而且还可以通过扩展获得更多的数据,诸如点击数.下载量.来源以及时间等等. 网上搜寻了一下比较有名有U.NU和0 ...

  5. Spring源码学习：第1步--在Spring源码中添加最简单的Demo代码

    为了最大程度地贴近Spring源码并进行学习,一种比较直接的做法是:直接在Spring源码中加入Demo代码,并进行调试. 参照以前使用Spring的经验,Spring最简单的使用方法是:一个实体类. ...

  6. table_rows查询优化

    日常应用运维工作中,Dev或者db本身都需要统计表的行数,以此作为应用或者维护的一个信息参考.也许很多人会忽略select count(*) from table_name类似的sql对数据库性能的影 ...

  7. Swift 笔记汇总

    Swift 3 笔记 Swift: The Basics :介绍 Swift 一些零碎的点. Swift: Basic Operators :介绍 Swift 的操作符. Functions : 介绍 ...

  8. Gitlab - Pull Request

    1.概述 今天查看Gmail,有网友私密我Gitlab的Pull Request工作流程,一直以为我写过这片博客,查看<Git和Gitlab协同工作>却发现遗漏了Pull Request这 ...

  9. 企业必会技能 tomcat

    企业必会技能 tomcat tomcat   一.什么是Tomcat? Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项 ...

  10. SQL中哪些情况会引起全表扫描

    1.模糊查询效率很低:原因:like本身效率就比较低,应该尽量避免查询条件使用like:对于like '%...%'(全模糊)这样的条件,是无法使用索引的,全表扫描自然效率很低:另外,由于匹配算法的关 ...