mishe / blog

前端碰上的问题或体会
230 stars 39 forks source link

新做的3.8活动页面bug #98

Open mishe opened 8 years ago

mishe commented 8 years ago

发现搜狗拼音输入法存在一个bug,当输入框在页面底部的时候,弹出的输入法界面会盖住输入框,造成用户无法见到自己输入的内容

解决问题的办法是:在输入框激活的时候,识别当前元素时候被遮盖(这里的方法比较简单粗暴适合测试页面的做法)

var height=document.body.offsetHeight;
$('input').on('focus',function(){
    var obj=$('.phone-code')[0];
    setTimeout(function(){
        if(height*0.6<obj.getBoundingClientRect().top){
            window.scroll(0,height*0.4);
        }
    },500)
});

测试地址

mishe commented 8 years ago

由于webview不支持target-densitydpi=device-dpi的设定,因此,这个在移动端H5和微信中完全没有问题的,但在内嵌webview的时候遇到的样式的兼容问题,最终采用了VW这个尺度单位,快速的解决了问题。