手机页面适配当WebView不支持viewport时的问题

使用viewport可以很好的在手机页面上对页面进行适配,但也有一种情况没法使用viewport来适配。

比如在APP内的WebView中,未明确设置setUseWideViewPort(true)时,这个时候webview显示网页就会忽略viewport标签造成页面不适配。

显示结果就是:比如页面的宽度是720px,在webview中页面显示会明显的比较大,出现横向和纵向滚动条,而在系统浏览器中却显示正常。


这种情况下页面该如何修改来适配?

方案一:修改APP代码,添加webView.getSettings().setUseWideViewPort(true) 。

方案二:修改页面,缩小页面的尺寸以此来抵消webview对页面的放大。


方案一比较简单不再说明,主要说明方案二中如何设置一个合适的尺寸才能抵消webview对页面的放大。

一个比较笨的方法就是从小到达依次调整页面的宽度,然后在手机的webview中查看,直到找到和webview中显示全屏并且不出现滚动条。


我在小米手机4中得到的结果是:

当设置为宽度为360px的内容时,webview中是全屏显示无滚动条,所以就可以知道默认webview对360px宽度的页面能进行完全适配。问题来了,360px宽度的页面是否能在其他手机上面完美适配呢? 答案当然是否定的。

既然这样那就先看看这个得出的360的数字和手机参数是否有对应关系?

通过之前的一篇文章可以知道小米4手机的另外两个参数(screenWidthDp:360, screen.width: 360px)。 


这个不会是巧合,从这两个参数可以推断出webview在未设置setUseWideViewPort(true)的情况下webview自动设定了viewport的width值为screenWidthDp的值。

也即是等于默认设置了<meta name="viewport" content="width=screenWidthDp, user-scalable=no" />,然后下面就是正常根据设置的viewport进行适配了。

所以未设置setUseWideViewPort(true) 的情况下不是不支持viewport,而是忽略了页面中的viewport,而是webview使用了默认的viewport进行适配。


另:做过Android的都知道,如果设置320dp的宽度则就表示横向全屏,因为标准的分辨率是320x480也即是中等密度分辨率(mdpi)。但是在某些手机上面比如小米4,则需要设置360dp才会显示横向全屏。不过值得庆幸的是大部分手机还是在标准的分辨率上面进行放大。


该说结论了:

最好是让webview使用页面中定义的viewport适配,这种适配更简单和兼容性更好,具体参考方案一。

如果出于历史原因比如已经发布了APP,但是仍需要兼容,则最好设置320px宽度的界面,考虑到类似小米4手机一类的,则最好设置页面的内容居中显示,另viewport也推荐设置一下来兼容其他浏览器。


以上只是使用页面宽度固定并且使用viewport适配的情况,如果是页面自适应比如响应式布局则上面的经验不一定适用。

提交评论