关于webview加载html内容的一些适应问题

首先,先摆一个需要load的html代码

<span style="color: rgb(51, 51, 51); font-family: 'PingFang SC', 'Lantinghei SC', 'Microsoft YaHei', arial, 宋体, sans-serif, tahoma; font-size: 16px; white-space: pre-wrap;">病情分析:皮肤病的发生与人的健康情况,生活习惯,工作环境与身心状况等都有密切关系.</span>
<pre accuse="aContent" class="best-text mb-10" id="best-content-1464550588" style="margin-top: 10px; margin-bottom: 10px; padding: 0px; font-family: 'PingFang SC', 'Lantinghei SC', 'Microsoft YaHei', arial, 宋体, sans-serif, tahoma; white-space: pre-wrap; word-wrap: break-word; font-size: 16px; line-height: 29px; color: rgb(51, 51, 51); min-height: 55px;">
(1)健康情况 有些皮肤病是由于全身<a class="baidu-highlight" href="https://www.baidu.com/s?wd=%E6%80%A7%E7%96%BE%E7%97%85&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YvnHw-PW0YnHwbujcsPyfL0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPH6YnjR3PWfd" style="color: rgb(63, 136, 191); text-decoration: none;" target="_blank">性疾病</a>引起的,如<a class="baidu-highlight" href="https://www.baidu.com/s?wd=%E5%85%A8%E8%BA%AB%E6%80%A7%E7%BA%A2%E6%96%91%E7%8B%BC%E7%96%AE&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YvnHw-PW0YnHwbujcsPyfL0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPH6YnjR3PWfd" style="color: rgb(63, 136, 191); text-decoration: none;" target="_blank">全身性红斑狼疮</a>,或由于慢性病引起的,如糖尿病,<a class="baidu-highlight" href="https://www.baidu.com/s?wd=%E8%82%BA%E7%BB%93%E6%A0%B8&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YvnHw-PW0YnHwbujcsPyfL0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPH6YnjR3PWfd" style="color: rgb(63, 136, 191); text-decoration: none;" target="_blank">肺结核</a>,梅毒等;有些皮肤病与免疫障碍或接受免疫抑制治疗有关,这种病人由于抵抗力低,较易发生带状疱疹,脱发,座疮等.
(2)接触过敏源 经常容易引起皮肤病变的过敏源有植物类如毒性长青藤,橡树,漆树等;还有花粉,食物,化妆品,清洗剂等.
(3)皮肤疹也有可能是由于使用如维生素,轻泻剂,抗生素,碘胺类药物引起.
(4)有些皮肤病与遗传有关,如<a class="baidu-highlight" href="https://www.baidu.com/s?wd=%E7%89%9B%E7%9A%AE%E7%99%A3&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YvnHw-PW0YnHwbujcsPyfL0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPH6YnjR3PWfd" style="color: rgb(63, 136, 191); text-decoration: none;" target="_blank">牛皮癣</a>,<a class="baidu-highlight" href="https://www.baidu.com/s?wd=%E5%AF%BB%E5%B8%B8%E6%80%A7%E7%97%A4%E7%96%AE&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YvnHw-PW0YnHwbujcsPyfL0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPH6YnjR3PWfd" style="color: rgb(63, 136, 191); text-decoration: none;" target="_blank">寻常性痤疮</a>,白斑,<a class="baidu-highlight" href="https://www.baidu.com/s?wd=%E5%BC%82%E4%BD%8D%E6%80%A7%E7%9A%AE%E7%82%8E&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YvnHw-PW0YnHwbujcsPyfL0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPH6YnjR3PWfd" style="color: rgb(63, 136, 191); text-decoration: none;" target="_blank">异位性皮炎</a>,<a class="baidu-highlight" href="https://www.baidu.com/s?wd=%E9%B1%BC%E9%B3%9E%E7%99%A3&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YvnHw-PW0YnHwbujcsPyfL0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPH6YnjR3PWfd" style="color: rgb(63, 136, 191); text-decoration: none;" target="_blank">鱼鳞癣</a>,单纯性水疱性肯皮溶解症,先天性手掌足迹<a class="baidu-highlight" href="https://www.baidu.com/s?wd=%E8%A7%92%E5%8C%96%E7%97%87&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YvnHw-PW0YnHwbujcsPyfL0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPH6YnjR3PWfd" style="color: rgb(63, 136, 191); text-decoration: none;" target="_blank">角化症</a>和秃发等多有遗传性,其中<a class="baidu-highlight" href="https://www.baidu.com/s?wd=%E5%BC%82%E4%BD%8D%E6%80%A7%E7%9A%AE%E7%82%8E&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YvnHw-PW0YnHwbujcsPyfL0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPH6YnjR3PWfd" style="color: rgb(63, 136, 191); text-decoration: none;" target="_blank">异位性皮炎</a>更有一定家庭史.
(5)与职业有关的皮肤病多见于因接触化学物质而致的疾病,如氯化物痤疮,麦粉湿疹以及与屠宰业有关的急性传染病如炭疽,<a class="baidu-highlight" href="https://www.baidu.com/s?wd=%E9%A9%AC%E9%BC%BB%E7%96%BD&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YvnHw-PW0YnHwbujcsPyfL0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPH6YnjR3PWfd" style="color: rgb(63, 136, 191); text-decoration: none;" target="_blank">马鼻疽</a>等.
(6)有些皮肤病多发生于某特定地区,如皮肤爬行疹多流行于热带.
(7)长期生活在拥挤,不洁环境的人易患衣虱病,常与有头虱,<a class="baidu-highlight" href="https://www.baidu.com/s?wd=%E9%98%B4%E8%99%B1&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YvnHw-PW0YnHwbujcsPyfL0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPH6YnjR3PWfd" style="color: rgb(63, 136, 191); text-decoration: none;" target="_blank">阴虱</a>和夜里疮的人密切接触,易受传染.
(8)长时间在寒冷或酷热的天气下从事户外活动,常会引起皮肤症状.
意见建议:要想预防皮肤病,就要搞清楚皮肤病发生的原因及其发展后果,根据不同情况加以防范.主要措施有以下几个方面:
(1)保持皮肤的清洁卫生 对油性皮肤要经常用肥皂和温水清洗;对干性皮肤则应少用肥皂.
(2)保持皮肤弹性 在寒冷季节,要经常用润肤剂涂于皮肤,保持皮肤的弹性和柔软,减少皮肤皲裂.
(3)保持头皮 头皮有保护头皮免受外界刺激的作用,应注意经常修剪,定期洗头,保持头皮的清洁.
(4)清洁指甲 指甲要经常修剪,并清除甲前端下的污物.
(5)保护皮肤 即使是皮肤有细小的破损,也要及时处理;对已有感染的皮肤要在注意清洁的基础上注意保护,适当进行隔离,防止接触感染;对瘙痒性皮肤在积极治疗的基础上要防止因抓挠引起继发感染;暑天,痱子是皮肤感染的先兆,因此,防痱,治痱至关重要.
(6)消除与饮食有关的诱因 对某些皮肤病如湿疹,银屑病,荨麻疹,酒渣鼻,脂溢性皮炎等,应注意限制食用鱼,虾等海腥食物和辛辣性食物.
同时,增强体质,保持精神愉快,注意锻炼,合理营养,提高机体免疫力,改善健康大辩论况等也是非常重要的.</pre>

在android4.4之前,这样的写法是可以让内容适应屏幕大小的;

String content = "上边的内容";
 WebSettings settings = webView.getSettings();
//      自适应屏幕
        settings.setUseWideViewPort(true);
        settings.setLoadWithOverviewMode(true);
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        settings.setJavaScriptEnabled(true);
//      设置可以支持缩放
//        settings.setSupportZoom(true);
//      设置出现缩放工具
//      settings.setBuiltInZoomControls(true);
        webView.loadDataWithBaseURL(null, content, "text/html", "utf-8", null);

但是在4.4之后,(如果html里面本身并没有去做适配移动设备的话),宽度可能会超出屏幕宽度,并且有横向的滚动条;
在网上找了各种方法,但是都没有比较合适的解决方案,setUseWideViewPort和setLoadWithOverviewMode,还有setLayoutAlgorithm方法虽然是被提到最多的,可是在4.4之后,光这样设置确实是没有效果的;
经过漫长的探索以及实验,发现5.0之后,webview是会自动适应屏幕的,settengs什么都不需要设置,内容不会超过屏幕宽,但是会很挤,字体小而且高度算不上自适应(和5.0之前,调用 webView.setWebChromeClient(new WebChromeClient());的效果一样);本想着这样然后去settings.setDefaultFontSize(size);设置字体大小,但是....无效(确实没明白为什么无效???)

再次经过漫长的探索,最终找到了<meta>标签;自己添加一个meta标签
常用写法<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

     WebSettings settings = webView.getSettings();
//      自适应屏幕
        settings.setUseWideViewPort(true);
        settings.setLoadWithOverviewMode(true);
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        //扩大比例的缩放
        settings.setJavaScriptEnabled(true);
//      设置可以支持缩放
//        settings.setSupportZoom(true);
//        int size = Utils.dip2px(ArticleDetailActivity.this, 50);
//        settings.setDefaultFontSize(size);
//      设置出现缩放工具
//      settings.setBuiltInZoomControls(true);
        String css = "<style type=\"text/css\"> </style>";
        String html = "<html><header><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no>"+css+"</header>"+"<body>"+content+"</body>"+"</html>";
        webView.loadDataWithBaseURL(null, html, "text/html", "utf-8", null);

但是需要注意,Android4.0以下手机不支持viewport的width,需要设置target-densitydpi;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容