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

问题:在微信端(安卓浏览器也如此)打开的H5登录页面中,点击输入信息,弹出软键盘会挤压背景图片。

本来的body宽高设置body{width:100%,height:100%},不起作用,这样写就会导致键盘弹出的时候html和body的高度从原来的100%变为(100%-键盘高度)。所以要再强行把高度调整回去。

未调整前:背景被挤压,导致下部出现空白背景

调整后:

插入js代码调整高度

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

原文地址:https://www.cnblogs.com/luzc/p/10334021.html

时间: 2024-07-31 18:35:02

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

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

body{width:100%,height:100%},下图蓝色背景放在body里面.我这个是微信端打开的H5链接 问题:手机要输入手机号或者密码,会弹出手机的键盘,然后就变成下图.键盘背景图给移到上面去了.体验极差. 解决方案: JS代码:用JS代码自动判断窗口的高度,然后赋值给body. 1 $(document).ready(function () { $('body').css({'height':$(window).height()})}); 最终图片

【H5小游戏开发教程】如何限制微信游戏只能在微信端打开?

在这行里接触的时间多了,就会发现很多有意思的东西. 比如,很多微信小游戏会限制只能在微信端打开,有木有? 有这样的, 也有这样的, 妈蛋,不能用PC访问,这游戏就没法扒呀..... 其实涛舅舅告诉你,这两种都可以扒 而且是用PC! 但是今天,我不教你扒皮 我要教你的是,怎么让你的微信游戏也能限制PC打不开 很想学吧  准备开始! 1.第一种不提了,因为人家是设置了微信授权登录,从微信那里就拦截住了,只能用微信访问,你可能弄不了这么高级的微信授权这块,如果你真能弄,这一讲你也不用听了,因为你已经能

如何限制微信游戏只能在微信端打开?

在这行里接触的时间多了,就会发现很多有意思的东西. 比如,很多微信小游戏会限制只能在微信端打开,有木有? 有这样的, 也有这样的, 妈蛋,不能用PC访问,这游戏就没法扒呀..... 其实涛舅舅告诉你,这两种都可以扒 而且是用PC! 但是今天,我不教你扒皮 我要教你的是,怎么让你的微信游戏也能限制PC打不开 很想学吧  准备开始! 1.第一种不提了,因为人家是设置了微信授权登录,从微信那里就拦截住了,只能用微信访问,你可能弄不了这么高级的微信授权这块,如果你真能弄,这一讲你也不用听了,因为你已经能

禁止微信内的H5页面上下拖动

客户需求:禁止微信内的H5页面上下拖动: 解决方案: 网上的答案几乎都是阻止默认事件,即: 1 document.body.addEventListener('touchmove' , function(e){ 2 e.preventDefault(); 3 }); 但是使用这个方法还存在一定的问题: bug1:有时生效有时失效: 原因:经过不间断的实践测试,发现有可能是网络加载的问题,在用户拖动页面的时候上面的功能代码还没加载出来,所以没有生效. 解决方法:监听页面资源加载,等页面内所有资源加

嵌套移动APP端的H5页面meta标签

嵌套移动APP端的H5页面meta标签小结: <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta name="apple-mobile-web-app-capable" con

支付宝打开H5页面,列表渲染问题

支付宝打开H5页面,列表渲染出了问题 其他浏览器,UC什么的都是好的,纯Jquery写的. 刚开始以为是.html()出问题,采用原生写,还是没作用. 解决方案: 因为列表我用 overflow:auto,这个每次右边渲染会出问题, 改成:           overflow:scroll  就可以了 花了接近2天的时间,居然是这个问题,开头一直找错,以为是JS问题. 原文地址:https://www.cnblogs.com/xiaoxiaossrs/p/9035451.html

【干货】微信场景之H5页面制作免费工具大集合

营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用户500万,访问量超1亿的神话. H5如此势头,不得不让营销人对H5页面的未来充满了期待,越来越多的人开始在营销中运用H5页面.其实在移动端各个领域,H5页面的叫法很多,也会称为翻翻看.手机微杂志.广告页.场景应用.海报\画报(动态海报.指尖海报.掌中海报.动画海报.微画报.微海报)等等,经常能见到的就是滑动

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

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

移动端与H5页面像素的差异与关系

最近工作任务主要是移动端内嵌H5页面,一次与原生进行像素交互下,发现了这个天坑,再次做个记录?? 天坑如下: H5页面中的“像素”与移动端设备的“像素”系统不一致,对于刚接触这块的我,曾经几时在还没有遇到过这样的情况下,去看相关的文章一点体会也没有,这次碰上了,然后又重新看了一遍,对这块的理解也能比较有感受了 先上总结:如果有不到位的,请告知修正:-P 理清几个概念 注意文中的英文表达,可以帮助我们更好的理解,因为同样的英文表达可以被翻译成不同的汉文,这会妨碍我们再查阅资料的时候混淆名词概念 物