2016年4月11日 星期一

[Android] 使用WebView讀取網頁時,表格無法完整顯示的簡易替代方案

一開始是想用WebView讀取特定網頁,讓使用者可以方便,不用離開app到browser開啟
但採用後發現WebView讀取該網頁是以完整顯示上半段文章為基準,下半段表格則超出頁面橫向範圍,用手勢也無法移動。

這現象跟網站本身的寫法和相容性有關,同時,WebView也只是最簡單基本讀取網頁用的元件,不然就不需要辛苦開發browser了。

在不能改動網站前後端的前提下,研究了許多方式都不能移動畫面,後來看Android下大多瀏覽器也無法正確瀏覽,iPhone下Safari跟Chrome則可以顯示(看來跟元件底層及API也有點關係@@)。忘記是哪款瀏覽器版本可以完整顯示表格,雖然背景不會同步拉寬,但至少可以完整顯示內容,且Android下也只找到這個方式可以正確顯示,就朝此方向追尋。

但找了幾個方法都無法改善,其他大部分的畫面問題應可以用頭兩行解掉:


   webView.getSettings().setLoadWithOverviewMode(true);
   webView.getSettings().setUseWideViewPort(true);
   webView.getSettings().setBuiltInZoomControls(true);


隔了好一陣子一度放棄,最後發現有人加了setInitialScale(1)這行,配合setLoadWithOverviewMode(true),setUseWideViewPort(true),
總算可以讓表格固定完整顯示。

   webView.setWebViewClient(new webClient());
   webView.setInitialScale(1);
   webView.getSettings().setJavaScriptEnabled(true);
   webView.getSettings().setLoadWithOverviewMode(true);
   webView.getSettings().setUseWideViewPort(true);
   webView.loadUrl(uri);

後記:
回頭拿Android Nexus 5x 6.0跟iPhone 6s 9.3.1比較,
Android下: Chrome v49.0, Opera v36.1, FireFox v45.0.1, Dolphin v11.5.5, Boat Browser v8.7.3,只有Dolphin做了表格完整顯示(Scale固定,背景維持框架原始大小),Chrome則是可以有技巧的左右滑一下但回不來...,其他都是表格無法完整瀏覽或移動。
iPhone下(沒看瀏覽器版本):Chrome, 
Safari,Opera,Dolphin各瀏覽器都是單純用手勢左右移動就可以瀏覽表格(背景維持框架原始大小)