最近在做嵌套在手机webview里面需要的一写页面。
在开发页面的时候遇到的最大的麻烦就是在chrome dev中,页面适配移动端手机,效果良好,在手机中的chrome,搜狗浏览器等也都可以完美渲染,并且js交互和请求都很流畅,但是在app的webview中却产生诸多bug,并且不支持iframe标签,css keyframe动画等。
ps:说说最近遇到的很纠结的一个问题。在主页面有很多信息流列表,列表里的每一条信息又是单独的一个的内容块。在点击列表的某一条时会进入到详情内容块。我采用了三种方法:
第一种:内容块单独放在一个页面,这样就产生了两个页面之间的跳转。问题在于---详情页返回的时候无法返回到主页面的历史浏览位置,用户体验不好,于是,撸主想到了使用scrollTop来,通过在主页面onload的时候getCookie,unonload的时候setCookie,cookie里面存的就是scrollTop值。这样就获取到了scrollTop,并且设置给document.documentElement.scrollTop || document.body.scrollTop。但是问题来了,当返回到主页面的时候,因为主页面是动态加载的,所以存在cookie中的scrollTop可能大于当前的scrollTop的情况。
第二种:使用iframe标签来嵌套详情页,这就不存在页面的跳转了,直接在当前页的上层实现一个浮层,来展示详情页。但是,在手机QQ和微信内嵌浏览器都没有很好的支持iframe标签,页面直接乱成翔了。但是小米手机上的webview却显示正常。
第三种:使用div代替iframe,重新写了请求以及DOM操作,这种方式很好的兼容各种浏览器,包括webview。其中遇到的两个问题是overflow的运用,因为两个层都有滚动条存在的可能性。其次就是第一次加载主页面,只能读取两条信息,这个问题仅仅存在于webview中,所以我就想在加载页面的时候把页面刷新一次,也就是reload。等我把这个问题解决了,主页面有不滚动了,无论怎么滚动他就是卡死在那里,只有再次重新刷新页面才能滚动页面。为了实现一个功能也是醉了。因此对基于webview开发网页有点仇视...
个人一直觉得,webview就是一个简单版的浏览器,应该支持浏览器支持的常规功能。webview的渲染机制和浏览器到底差距在哪里呢?各种应用内嵌的webview都是一样的吗?求问html5开发的同志们在移动端开发页面有什么技巧呢?
赶紧贴下 Android Hybrid 应用四大坑