WKWebView图片文字自适应屏幕

前言

在开发中经常需要使用到WebView,然而加载HTML字符串后效果并不是全屏,这时候就需要做自适应屏幕大小。这里主要说一下WKWebView如何实现图片和文字自适应屏幕。

1.文字自适应屏幕

创建WKWebView的时候,直接添加js来实现自适应。

// 自适应屏幕宽度js
NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addUserScript:wkUScript];
WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
wkWebConfig.userContentController = wkUController;
WKWebView *contentWeb = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:wkWebConfig];

2.图片自适应屏幕

图片自适应屏幕采用添加HTML源码的方式来实现自适应,使用下面源码拼接上后台的HTML源码,然后直接加载既可。

NSString *htmlString = [NSString stringWithFormat:@"<html> \n"
                            "<head> \n"
                            "<style type=\"text/css\"> \n"
                            "body {font-size:15px;}\n"
                            "</style> \n"
                            "</head> \n"
                            "<body>"
                            "<script type='text/javascript'>"
                            "window.onload = function(){\n"
                            "var $img = document.getElementsByTagName('img');\n"
                            "for(var p in  $img){\n"
                            " $img[p].style.width = '100%%';\n"
                            "$img[p].style.height ='auto'\n"
                            "}\n"
                            "}"
                            "</script>%@"
                            "</body>"
                            "</html>", html];
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,830评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,262评论 4 61
  • 转载请注明出处 1.QR码的基本知识 QR Code是一个各边模块数都相等的方形图案。它一共有40个版本(V1-V...
    只看你一眼阅读 2,167评论 0 3
  • 临睡了突然问了你一句,“我在外面上,你怎么个想我法”。 “想你又瘦了吗,吃好喝好了码,一个人在外头能照顾好自己吗....
    阿土127阅读 287评论 0 0
  • 朝发夕至,中间改签火车一次,晚上19:00回京。 几天就待家里,新鲜空气、暖和环境以及满眼绿色,在南国看来习以为常...
    捡石头的村童阅读 180评论 0 0