重庆的网站设计公司价格,专业的镇江网站建设,wordpress点击文章在新页面打开,wordpress考试插件问题描述在html5plus环境下#xff0c;当html中存在固定在底部的元素时#xff0c;此时弹出软键盘的话#xff0c;底部的元素也会被弹上来。出现这种情况时#xff0c;看起来页面布局好像乱掉了#xff0c;这样给用户的体验不太理想。问题分析问题原因之所以会出现这种情况…问题描述在html5plus环境下当html中存在固定在底部的元素时此时弹出软键盘的话底部的元素也会被弹上来。出现这种情况时看起来页面布局好像乱掉了这样给用户的体验不太理想。问题分析问题原因之所以会出现这种情况是因为软键盘弹出会导致Webview的高度发生变化进而导致html中元素位置发生变化。其实也可以认为元素定位没有变只是元素所在容器的宽高变化看起来像是元素的位置变了。意思就是元素定位相关的css并没有错误或者说失效。验证方法想验证这个变化可以通过监听window的resize事件在回调中打印日志即可。// 监听window的resizewindow.addEventListener(resize, function() {var height document.documentElement.clientHeight;var width document.documentElement.clientWidth;console.log(可见区域高度: height);console.log(可见区域宽度: width);});当然通过chrome调试Webview的功能在chrome中可以很清楚地看到Webview的高度变化。简单来说软键盘被唤起的时候原本属于Webview的空间被软键盘占用了(是占用不是覆盖或者遮盖)。屏幕一共就那么高软键盘把Webview的空间占用了一部分那么Webview自然就被挤压高度也就变了。解决办法固定元素元素之所以会上浮是因为通常我们都是设置元素的bottom值使其固定在底部。.bottom {height: 40px;position: fixed;bottom: 0;}但是Webview被挤压后底部的位置上去了。元素是基于bottom值进行定位那么它看起来就是在软键盘的上面。逆向固定既然bottom值会使元素上浮但是我们又希望元素固定在底部。此时可以使用逆向的方式也就是设置top值让元素固定在顶部。var bottomEl document.querySelector(.bottom);// 可见区域高度减去元素的高度bottomEl.style.top document.documentElement.clientHeight - 40 px;由于是基于top值定位Webview被向上挤压顶部的位置是不变的那么元素的位置自然就不会发生变化。效果图及源码改进后的效果如下示例代码见附件下载后真机运行即可。其它办法如果各位有其它更好的解决办法欢迎指教并在社区分享你宝贵的经验。
