当页面上的输入框位于下半屏的时候,点击输入框拉起软键盘之后,会挡住输入框。这个坑以前也填过几次,但是没有记录,这次记录一下。
兼容iOS设备,使用以下css样式:
html,body {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
兼容Android设备,使用以下zepto代码:
var ua=window.navigator.userAgent.toLowerCase(),os="",tap="click";
if(/android/.test(ua)) os = 'android';
if(/ipad|iphone/.test(ua)) os = 'ios';
if(/ipad|iphone|android/.test(ua)) tap= 'tap';
var bindAndroidScroll =function(that){
if(os=="android"){
setTimeout(function(){
that.scrollIntoViewIfNeeded();
},500);
}
}
$("body").on(tap,"input,textarea", function(){
if(!$(this).prop("readonly")) bindAndroidScroll(this);
});
参考链接:
https://segmentfault.com/q/1010000009348207?sort=created
https://www.cnblogs.com/xiahj/p/8036419.html
https://my.oschina.net/cjlice/blog/625526
https://stackoverflow.com/questions/7417123/android-how-to-adjust-layout-in-full-screen-mode-when-softkeyboard-is-visible/19494006#19494006