Question

前端工程师，移动Android（安卓）端，html5，css,当input 获得焦点，显示虚拟输入法键盘，使图片变形

无论是img图片，还是背景图片，整个页面中，只要是输入法键盘出现，图片都会被缩到上方，为什么？有什么解决方案吗？





Answer 1

这是由系统强制产生的效果，在输入法打开的状态下，当前拥有输入焦点的控件一定要出现在当前屏幕的可视范围内（这样产生的效果就是看起来页面好像被输入法的虚拟键盘挤压一样），否则你通过输入法输入的字符都看不到究竟输出到哪里了，大部分人遇到这种情况都会产生一种恐慌的心理，从而造成不良的使用体验。因此这种效果是必须的，没有解决方案。如果你想让文本框在输入数据的时候其他元素也要出现在屏幕上（比如你图片中的那个圆角按钮），你可以把这些元素做成绝对定位或固定定位的，这样在页面被挤压时候它们也会被顶上来。