解決 android 高低版本 webView 裏內容 自適應屏幕的終極方法

先說下我的情況,大家可以對號入座(嫌無聊請跳過)

      我的項目要求是這樣的,先從數據庫裏面拿出來html標籤,因爲加載到移動端的網頁內容是用戶在網頁編輯好了之後提交到服務器的,即網頁內容是 b/s 交互,我在網頁前段編輯器裏面設置了只保存編輯的 html 標籤,即是沒有頭部和後面的,形式是:

<html>

   <body>

       只保存這裏的標籤到數據庫

   </body>

</html>

     移動端有兩個activity,這時候是 c/s 交互了,頁面一負責加載前置數據,例如一張封面圖之類的,然後用戶點擊進入webView主體,我上面說了,我的目標html標籤是保存到db的,所以我在第一個頁面的時候就把db裏面的html下載保存到內存了,String即可,用戶點擊時,跳轉傳遞。看到這裏,相信你知道我是加載到webView的了,沒錯,就是組合,再load。注意了,我這裏並不是直接加在一個鏈接,不是 webView.loadUrl() 是組合好 html 後再使用 loadDataWithBaseUrl。

 

 說下標籤不同的影響(很重要,因爲某些方法對某些表情有用)

      通常,我們加載後超出屏幕寬度的一般是 img 或者 video 標籤或者文字,這類標籤可以使用css 或者 網上盛行的三個設置做到適配,這三個盛行的設置是:

setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
setting.setUseWideViewPort(true);
setting.setLoadWithOverviewMode(true);

我先說明,這三個設置不一定有效,android 4.4 後就很可能沒效,爲什麼是很可能?你都不敢確定?上面說過,和標籤及其設置有關係。
如果出現了 table 這種標籤,即 table 適配屏幕,很可能css都失效,怎麼辦?,我就是遇到了它,所以有了這篇文章。

三,三種解決方法(重點)。
針對我的自己情況,自己組合html顯示的。
法一:
使用 Css 適配,它比上面的三種 setting 有效,對img 和video 絕壁有效,我給出個例子:
1 "<style>"+
2  "img{" +
3         "max-width:100%;" +
4          "height:auto}" +
5  
6  "video{"+
7             "max-width:100%;"+
8              "height:auto}"+
9   "</style>" +

        法二:使用三種setting設置:          

        setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
setting.setUseWideViewPort(true);
setting.setLoadWithOverviewMode(true);
這種方法的失敗可能性很大,但是,也可以一試

法三:使用javaScript腳本,暫時給它定義成功率是 100%(因爲我用它沒失效過)
我這裏給一個例子,例如我上面說到的 table。
1
2
3
4
5
6
7
"<script type=\"text/javascript\">"
     "var tables = document.getElementsByTagName('table');" // 找到table標籤
       "for(var i = 0; i<tables.length; i++){" +  // 逐個改變
              "tables[i].style.width = '100%';" +  // 寬度改爲100%
               "tables[i].style.height = 'auto';" +
         "}" +
  "</script>"+

                看到這裏,你很可能會說,這和 css 有什麼區別?區別可大了,我使用 css 改變table的失敗了,使用它成功了。

                 說明一下: 上面使用 js 腳步適配,請寫到 內容加載之後,即是 <body> 內容 <寫後面></body>,爲什麼呢?有基礎的人都知道,html 是解析性語言,從上到下,你要先加載好 html 再使用 js 改變,除非js 包在函數裏面。

 

四,打完收工

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章