移动端h5页面，当软键盘弹出时，会将背景图片压缩（sencha Touch框架）

最新推荐文章于 2023-01-31 14:44:53 发布

Royal_json

最新推荐文章于 2023-01-31 14:44:53 发布

阅读量1.7k

点赞数

文章标签：解决背景图片被软键盘压缩

本文链接：https://blog.csdn.net/Royal_json/article/details/80995009

版权

这个问题困扰好久，动态改变body高度就OK了。

只需要在框架初始化函数下面，执行下面代码

// 每次激活当前视图，都会进行数据加载
onActivateView: function () {
     $('body').height($('body')[0].clientHeight);
},

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Royal_json

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

移动端H5图片轮播缩放

10-23

在移动端H5开发中，图片轮播和缩放功能是非常常见且重要的元素，尤其是在展示产品、分享信息或者创建互动体验时。本资源基于Sencha Touch框架，为移动设备提供了高效且用户友好的图片轮播与缩放解决方案。下面将详细...

H5 防止安卓手机软键盘弹出挤压页面导致变形的方法

热门推荐

开心大表哥

10-12

2万+

h5防止安卓手机软键盘弹出挤压页面导致变形的方法先看看问题： 1.原来是这样的： 2.在苹果手机里面是正常的： 3.到了安卓就是这样： 4.原因就是在安卓中被软键盘顶上来了，而苹果的软键盘是覆盖的（分层） 5.后来用的解决方法是，把当前页面的body固定好，即在当然页面加上这段js：$('body').height($('body')[0].clientHeight);6.

记原生键盘弹起,H5页面被压缩的两种解决方案

码码猿

08-25

1133

记原生键盘弹起导致的H5页面压缩变形问题转载于:https://www.cnblogs.com/belongs-to-qinghua/p/12192846.html 思路为:监听页面变化,动态的展示和隐藏底部被顶上来的内容

sencha-touch-1.0.1a.zip_Sencha Touch _sencha touch api_touch

09-14

Sencha Touch 是一款专为移动设备设计的前端框架，它为开发者提供了构建触控友好的、高性能的Web应用程序的能力。1.0.1a是这个框架的一个早期版本，虽然现在可能已被更新版本所取代，但对于了解其发展历史和技术原理...

api.zip_sencha _sencha touch api_sencha touch2 api

09-20

标题中的"api.zip_sencha _sencha touch api_sencha touch2 api"表明这是一个关于Sencha Touch API的压缩文件集合，可能包含了Sencha Touch和Sencha Touch 2两个版本的API文档。 **Sencha Touch基础知识** Sencha ...

webapp界面UI框架Sencha Touch 是WEB APP的界面UI组件库,明显比jquery Mobile快.zip

01-14

Sencha Touch是一款专为Web应用程序设计的用户界面（UI）框架，主要针对移动设备。它提供了丰富的组件集合，包括按钮、表格、面板、下拉菜单等，使得开发者能够快速构建功能丰富的、具有触摸友好的交互体验的Web应用...

marcy:Sencha Touch 企业移动应用框架

06-29

Sencha Touch 企业移动应用框架 Marcy（以纽约州最高峰命名）是一个固执己见但思想开放的框架，用于使用 Sencha Touch 构建企业移动应用程序。入门这是一个示例安装。 sencha generate app MyApp ~/Desktop/my-...

Android原生键盘弹起,H5页面被压缩的两种解决方案

weixin_43780921的博客

11-30

2706

这种方法相对与第一种能更完善解决问题,就是先获取被影响的页面正常显示时的高度,在键盘被掉起时把这个正常的高度赋值给这个元素就行了,简单地说就是给予被挤压页面一个正常的高度值,具体见下面代码,其中 'content' 为我被影响的页面Id.移动H5项目中,会出现input框获得焦点键盘弹出把页面元素顶上去压缩到一起,影响页面布局.方案二：监听页面变化，键盘弹起时将变化之前的高度赋值给压缩后的页面。页面变化,动态的展示和隐藏底部被顶上来的内容。这种方法经调试还不算十分完美。

H5防止安卓手机软键盘弹出挤压页面导致变形的方法

mirow的博客

01-31

2403

H5防止安卓手机软键盘弹出挤压页面导致变形的方法

移动端，手机软件盘抬起背景图片压缩问题(背景图片自适应)

wangjie的博客

04-08

700

移动端，因为手机自带键盘抬起背景图片发生压缩，且背景图片自适应不同型号的机型或平板问题解决。问题发生的原因：(一)、使用标签有问题造成的后果(二)、css样式中用width:100%;height:100%；属性控制背景图片大小造成的后果最终解决方法(三)、vue同理解决（动态更改Style里height值，mounted 监听页面高度）先放效果成品问题发生的原因： (一)、使用标签有问题习惯情况下我将背景图片放在了ion-content标签里 //背景图片直接放在了ion-content里 &

H5+原生app项目键盘弹起背景被上推、挤压的解决方法

chenlim87的博客

08-26

2092

最近做了原生app嵌套H5的手机端应用。因为是第一次做手机端应用，遇到问题挺多。现总结下登录页遇到的问题。正常样式如图：当点击输入框，键盘会弹起，此时样式就错乱了。输入框和底部的背景图会上移，遮挡住头部背景文字。给输入框加了高度之后，调整样式，输入框正常了，但底部的背景图还是被挤压上来了。然后修改了样式后还是不行。通过样式查看，背景图被挤压的原因是因为键盘弹起时改变了屏幕的可视区域大小，所以底部的div就上来了。既然键盘弹出时会改变屏幕大小，那我们在键盘弹起时不让它改变不就可以了吗？在moun

软键盘弹出对背景图片的挤压和fixed定位的影响

qq_38850058的博客

08-31

1187

1：对背景图片的影响其实我们可以在页面初始化的时候把页面高度设置死，而不用设置height: 100% 这种 // 获取浏览器的高度 let h = document.body.clientHeight || document.documentElement.clientHeight // 解决背景图变形 document.getElementsByClassName('child...

移动端h5页面软键盘弹出后 背景图片被顶上去

一捆铁树枝的博客

02-13

1962

移动端h5页面在软键盘弹出后，body的高度被压缩了，就导致原本高度100%的背景图被顶上去一截，需要把div的高度强行设回100%才能解决这个问题 <div class="app" :style="{ height: bodyHeight + 'px' }"></div> mounted(){ this.bodyHeight=document.documentEl...

登录界面，body上有背景图，点击输入框时，弹出的手机键盘会把背景图顶变形，而且会把footer顶上去...

weixin_30564901的博客

04-24

997

js： //防止背景图被手机键盘压缩变形 $(document).ready(function () { $('body').css({'height':$(window).height()}) }); //当点击input出现手机键盘时，窗口大小改变，隐藏footer以防止footer被手机键盘顶上来 $(function(){ var oHe...

移动端背景图被键盘抬起挤压解决

糖果云专栏

03-19

3516

$('body').height($('body')[0].clientHeight);

html5页面,背景是一个整体的图片，键盘弹出，页面变形（页面img压缩）

qinyuhua93的博客

08-12

6282

代码如下，一直是键盘弹出只有页面会变形，使用多种解决方法一直不能解决，后来查找资料终于找到了解决方法：(其实background也是一样的原理) 1，如果屏幕高度固定的话，就直接给img一个固定的数值； 2，如果不固定的话，使用js动态获取屏幕高度$('#editor_bgImg').height($(window).height()); 暂时只有这两个方法可以解决，如果有另外的解决方法，大