h5 php 页面渲染,webview相比浏览器渲染有什么坑?

最近在做嵌套在手机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开发的同志们在移动端开发页面有什么技巧呢?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值