h5端移动端软键盘弹起改变高度问题
问题描述
在移动端h5页面,当页面中包含input、textarea输入框的时候,或者有调起软键盘的操作时,安卓浏览器下,可视窗口的高度改变,导致页面上的vh重新计算,页面被压扁。ios下的浏览器(safari)没有这个问题。
原因
在ios下,软键盘是叠在可视窗口上面的,也就是不影响可视窗口的大小。但是在安卓,软键盘是在窗口中,即占用窗口的面积。
解决方案
给viewport设置height值,可用window.innerHeight赋值。
<meta name="viewport" id="viewportMeta">
var initViewport = function(height){var metaEl = document.querySelector("#viewportMeta");var content = "height=" + height + ",width=device-width,initial-scale=1.0,user-scalable=no";metaEl.setAttribute('name', 'viewport');metaEl.setAttribute('content', content);
}
var realHeight = window.innerWidth > window.innerHeight ? window.innerWidth : window.innerHeight
initViewport(realHeight);
亲测在键盘谈起、屏幕旋转的情况下,可使页面正常显示
h5端移动端软键盘弹起改变高度问题相关推荐
- vh布局移动端软键盘弹起改变高度问题
问题描述 在移动端使用vh布局.当页面中包含input.textarea输入框的时候,或者有调起软键盘的操作时,安卓浏览器下,可视窗口的高度改变,导致页面上的vh重新计算,页面被压扁.ios下的浏览器 ...
- H5 (React) 移动端监听软键盘弹起、收起
前言:H5 有时底部按钮是固定定位,当页面上面需要用到输入内容时,会弹起软键盘,然后把底部固定的按钮也弹起来了,我们希望弹起软键盘时,底部的固定定位按钮隐藏,这里就需要对移动端软键盘弹起收起进行监听. ...
- h5 移动端 监听软键盘弹起、收起
前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化 window.onresize事件来做突破点的,但是i ...
- h5 移动端 监听软键盘弹起、收起
前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化 window.onresize事件来做突破点的,但是i ...
- h5(移动端) 监听软键盘弹起、收起
https://blog.csdn.net/qq_38296051/article/details/109290225 https://blog.csdn.net/qq_42231156/articl ...
- 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)
解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) 参考文章: (1)解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) (2)https://www.cnblogs.com/zouw ...
- 移动端软键盘弹起遮挡输入框问题的解决方案
移动端软键盘弹起遮挡输入框问题的解决方案 1.背景 原生app与H5页面混合开发时,input输入框唤起软键盘时,输入框被遮挡,分为两种情况: 客户端设置了windowSoftInputMode =& ...
- 安卓输入法弹出后css横屏,mui开发安卓端,输入法软键盘导致css横屏样式判断触发...
mui开发安卓端,输入法软键盘导致css横屏样式判断触发 mui开发安卓端,输入法软键盘导致css横屏样式判断触发 css 横屏媒体查询 @media screen and (orientation: ...
- 移动端背景图软键盘的兼容
本文主要介绍移动端背景图软键盘的界面兼容行问题解决. 1.问题描述,当前端小工程师写背景图的情况下,经常会遇到在谷歌浏览器的调试模式下一切都很ok,结果在真机测试却样式堪忧.比如,背景图被软键盘撑开, ...
最新文章
- CSS3支持IE6, 7, and 8的边框属性
- [Android]使用Kotlin开发Android(二)
- Oracle数据类型(转)
- Ecplise中配置Tomcat7服务器
- 深入【Get】与【Post】区别
- python如何实现日期格式的转换_python开发中时间格式如何转化?
- android java 图像显示不出来_Java-Android Studio无法在图像视图中显示图像
- 基于PHP+MySQL企业工资管理系统的设计与实现(含论文
- java总结一:JSON转对象
- ci.php教程,CodeIgniter
- python批量查询ip归属地_python查询ip归属地
- 金蝶凭证序时簿在哪_金蝶K3总账凭证查询序时簿能否显示何引出核算项目
- vite 框架 打包修改主页名字得方法
- 蚊香液加热器雷达感应,人体存在感应雷达模块,智能控制加热器启动与关闭
- Ansible动态Inventory格式
- 红帽linux安装intel(R) wifi link 5100 AGN总结
- 微信小程序014租房-房屋租赁合同系统
- 2022阿里P7级面试,掌握这份路线图上的技术点,So easy(Java岗)
- 蒙特卡洛法求概率密度函数matlab,matlab的蒙特卡洛算法-----用概率算法求pi值
- [AHK]给联想E47笔记本触摸板设定热键开关,免得误碰。