首页 > 代码库 > ipad webapp 左右分栏 webview的问题

ipad webapp 左右分栏 webview的问题

近期公司需要开发一个项目,原来做的是手机版的单页面APP(Single Page Application),再后来客户反馈不错,还想要做ipad版本。

一开始,我们是考虑把我们的单页面框架给重构,然后再给客户做一个ipad版(基本布局就是左右分栏),但工期赶(一个月不到),而且在讨论过改框架的技术难度和风险管理后,发现没那么简单,如果贸贸然弄一个,以后估计会埋很多坑给开发团队,于是采取了一个临时的折中方法,将ipad上的界面分成左右两个webview,左右两边都分别是一个单页面来处理,两个页面之间的信息通讯,可以使用url地址传参(参数少的时候),也可以使用localStorage共享存储区域。

 

按照这样的想法,改好demo之后只需分别加载两个单独的webapp页面,然后把数据逻辑什么的处理一下就好了(实际上还有一些全屏弹窗什么的还没解决),然而在加载的时候却发现,单页面APP的宽度不对。。。死活调不过来。。。加载后的页面总是占用768的宽度,而不是实际viewport的宽度

 

再后来,捣鼓了好一阵子之后,发现只需要在ios app的工程中将webview的scalesPageToFit属性设置为no,同时将页面中的meta=viewport标签删除后,页面显示就正常了(viewport的宽度正常了)。。。

 

真是个巨坑啊。。。为了适应移动端而设置的viewport结果却是罪魁祸首。

 

另外有没有人有其他的解决办法,欢迎留言~

ipad webapp 左右分栏 webview的问题