移动端网站，键盘弹出对页面的影响

在移动端网站中，ios与安卓键盘弹出时对页面有不同的处理方式。

ios，键盘弹出但整体页面高度不变。

安卓，页面高度=屏幕高度-键盘高度

这样对页面样式就会造成不同的影响。

当有表单弹窗，且弹窗高度在页面高度的50%左右时影响尤为严重。

在安卓中：弹窗的头部很有可能被顶到页面之外，且无法滑动察看完整的弹窗信息。

在最近的一个移动端项目中，对滑动部分使用了 calc设置高度（是微信网站，兼容-webkit-。关于calc的兼容性不甚明白，但在使用的时候似乎没遇到兼容性问题（主要是微信网站，测试过的机型包括 iphone4+,）使用vh计算元素高度（vh似乎也有兼容性问题但同样没遇到））

但文本框呼出键盘时页面被推起，因为是计算好的高度，底部导航紧贴着键盘顶部了。

此时的高度或者是vh不再根据整个页面的高度计算。

解决方案：

将页面的高度固定下来，即先用js无论在文本框获得焦点时，还是在页面载入时首先将元素的高度固定下来，并保持body的高度。

这样键盘弹出时页面的布局高度不变，并可以正常的上下滑动。

另外移动端的网站很有必要对一些icon进行预加载，防止点击时icon闪烁。

转载于:https://www.cnblogs.com/rohanCh/p/7383673.html

移动端网站，键盘弹出对页面的影响相关推荐

js防止安卓手机软键盘弹出挤压页面导致变形的方法
h5防止安卓手机软键盘弹出挤压页面导致变形的方法输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了 ...
（小技巧）h5 手机键盘弹出收起的处理
本文转载于思否社区专栏:随笔作者:hzzly 前言:前段时间也是应项目的需求开始了 h5 移动端的折腾之旅,在目前中台的基础上扩展了两个 ToC 移动端项目,下面就是在 h5 移动端表单页面键盘弹出 ...
Android页面监听虚拟键盘弹出、收起
js 移动端关于页面布局,如果底部有 position: fixed 的盒子, 又有input,当软键盘弹出收起都会影响页面布局. 如图: 页面这时候Android可以监听resize事件,代码如下, ...
php手机网页弹出软键盘代码,Html5页面上如何禁止手机虚拟键盘弹出
工作中遇到如下需求,点击输入框弹出自定义弹窗,输入框是input标签: 但是在移动端,input会默认触发手机的虚拟键盘,如何阻止手机虚拟键盘弹起呢?目前我试过有两个方案,一个是给input添加rea ...
Android11键盘弹出动画,(2016-11-04完美解决)移动端iOS第三方输入法遮挡底部input及android键盘回落后留白问题...
问题概述问题1:H5 web 移动端输入框, 键盘唤起后fixed定位好的元素跟随页面滚动了起来- fixed属性失效了!满屏任性横飞, 如下图: 问题2:有几后来含些在到气时按式近篇来又的方浏消 ...
ios 键盘弹出input输入框被遮挡键盘隐藏时页面无法回弹解决方案
ios 微信键盘弹出input输入框被遮挡键盘隐藏时页面无法回弹解决方案问题:测试发现ios微信端浏览器中,键盘弹出后,输入框被软键盘遮挡,input失焦后,因软键盘顶起的页面没有回弹到原来位置, ...
h5页面键盘弹出影响页面布局（兼容）
其实弹框之所以影响页面布局,我碰到的一般都是因为页面时position:fixed时,键盘一弹出,布局就乱了,我的解决方案是,首先就是把fixed尽可能的改成其他的,接着监听窗口大小变化事件,然后处理 ...
移动端选择时间时禁止软键盘弹出
今天在做移动端时遇到了尴尬的问题选择时间时手机自带的软键盘将时间插件顶了上去很别扭因此在网上找了下我前端使的是element-ui 前端: <el-date-picker v-mod ...
android软键盘弹出底部有黑色闪出,vue移动端安卓软键盘弹出底部按钮顶起
在做一个基于企业微信的h5移动页面时,当软键盘弹出时,底部fixed定位在ios上没事,安卓手机上,底部按钮会被顶起到软键盘,查看原应时由于软键盘顶起时,安卓设备的视图会变小.造成固定定位按钮呗顶起. ...

移动端网站，键盘弹出对页面的影响

移动端网站，键盘弹出对页面的影响相关推荐

最新文章

热门文章