H5页面背景图被键盘挤压移动了位置解决方法

body{width:100%,height:100%},下图蓝色背景放在body里面。我这个是微信端打开的H5链接

问题：手机要输入手机号或者密码，会弹出手机的键盘，然后就变成下图。键盘背景图给移到上面去了。体验极差。

解决方案：

JS代码：用JS代码自动判断窗口的高度，然后赋值给body。

1 $(document).ready(function () { $(‘body‘).css({‘height‘:$(window).height()})});

最终图片

时间： 2024-08-13 22:47:33

H5页面背景图被键盘挤压移动了位置解决方法的相关文章

安卓微信端打开H5页面背景图被键盘挤压移动位置解决

问题:在微信端(安卓浏览器也如此)打开的H5登录页面中,点击输入信息,弹出软键盘会挤压背景图片. 本来的body宽高设置body{width:100%,height:100%},不起作用,这样写就会导致键盘弹出的时候html和body的高度从原来的100%变为(100%-键盘高度).所以要再强行把高度调整回去. 未调整前:背景被挤压,导致下部出现空白背景 调整后: 插入js代码调整高度 1 $(document).ready(function () { $('body').css({'heigh

微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法

Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机输入法键盘遮盖住. 找到一段js代码直接解决之,点击时强制滚动之,好像也解决了在Android浏览器下浏览的同样问题. 1 if(/Android [4-6]/.test(navigator.appVersion)) { 2 window.addEventListener("resize", function() { 3 if(document.activ

H5页面关于android软键盘弹出顶起底部元素的解决方案

通过resize方法监听$(this).height(),获取页面高度,成功获得改变后的页面高度,软键盘弹出时隐藏被顶起的页面. var winHeight = $(window).height(); //获取当前页面高度 $(window).resize(function(){ var thisHeight=$(this).height(); if(winHeight - thisHeight >50){ //当软键盘弹出,在这里操作 $(".顶起的页面").hide(); }

jsp页面has already been called for this response错误解决方法。

创建验证码的jsp页面提示错误:has already been called for this response <%@ page contentType="image/jpeg" %><%@ page import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"%><%!Color getRandColor(int fc,int bc){ //在确定的范围中获得随机

H5页面背景添加水印

HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <script type="text/javascript" src="js/index.js" >&

键盘遮住文本框的解决方法

关于键盘遮住文本框的处理,以用户登录为例.有两种方法,第二种比较简单.经实测发现,ipad mini和ipad air的宽高不一样,正好相反.mini宽度为1024,高度为768:air宽度为768,高度为1024.所以在适配这两种设备时还需判断. 1 CGFloat deviceHeight = [UIScreen mainScreen].bounds.size.height; 2 CGFloat deviceWidth = [UIScreen mainScreen].bounds.size.

UITableView 键盘覆盖UITableViewCell的输入框解决方法(swift)

extension UITableView { func addNotifications() { NotificationCenter.default.addObserver(self, selector: #selector(boardWillShow(not:)), name: NSNotification.Name.UIKeyboardWillShow, object: nil) NotificationCenter.default.addObserver(self, selector:

sharepoint 2010项目中，ashx页面获取SPContext.Current 为null的原因和解决方法

//错误的写法 public void ProcessRequest(HttpContext context) { SPSecurity.RunWithElevatedPrivileges(delegate { // 'SPContext.Current' null reference error using (var site = new SPSite(SPContext.Current.Site.ID)) { using (var web = site.OpenWeb(SPContext.C

eclipse新建JSP页面报错:Multiple annotations found at this line解决方法

错误提示: Multiple annotations found at this line: - The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path - The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path 错误原因:缺少编译JSP页面