h5-ios和Android手机输入键盘总结-android软键盘弹出

原因:

ios当输入框聚焦弹出键盘的时候,页面高度没有变化,是分层的,软键盘是盖在网页上的

Android的软键盘弹出的时候,软键盘是占据页面的高度的,这时候你的页面高度发生变化,页面上滑让给软键盘,你fixed底部的东西都会弹上去,页面高度为 页面+软键盘

解决办法:

iOS:这时候页面会出现滑动,想让页面不滑动,需要设置页面滑动到顶端

这个对Android没用,页面高度就发生了变化,你去判断页面高度的变化就可以了

隐藏方式:

display: none; // DOM元素直接不渲染,在文档流不占位置
visibility: hidden; // DOM元素仍渲染,在文档流占位置,但不可见,不可触发事件
opacity: 0; // DOM元素仍渲染,在文档流占位置,但不可见,可点击,可触发事件
transform: tranlateX(‘500px’); // DOM元素仍渲染,在文档流占位置,只是移出了可见范围

参考文章:

  1. H5 –(解决)安卓中input输入框获取焦点后,底部固定定位的按钮顶起问题
  2. H5防止安卓手机软键盘弹出挤压页面导致变形的方法
  3. 移动端软键盘监听(弹出,收起),及影响定位布局的问题

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据