andriod高版本webView内容自适应屏幕解决方案

最新推荐文章于 2021-05-26 08:54:16 发布

weixin_33716557

最新推荐文章于 2021-05-26 08:54:16 发布

阅读量131

点赞数

文章标签：移动开发 javascript ViewUI

原文链接：https://my.oschina.net/fltsp/blog/795959

版权

为什么80%的码农都做不了架构师？>>>

通常，我们加载后超出屏幕宽度的一般是 img 或者 video 标签或者文字，这类标签可以使用css 或者网上盛行的三个设置做到适配，这三个盛行的设置是：

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

注：这三个设置不一定有效，跟标签设置有关。

使用 Css 适配，它比上面的三种 setting 有效，以下是修改img 和video 的例子

"<style>"+
 "img{" +
        "max-width:100%;" +
         "height:auto}" +
 
 "video{"+
            "max-width:100%;"+
             "height:auto}"+
  "</style>"

使用javaScript脚本，据说成功率是 100% （如果出现了 table 这种标签，即 table 适配屏幕，很可能css都失效，可以试试这办法）

"<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>"

转载于:https://my.oschina.net/fltsp/blog/795959