美文网首页我爱编程
wkwebview手机屏幕适配

wkwebview手机屏幕适配

作者: 七色花_t | 来源:发表于2018-04-11 15:51 被阅读15次

第一种:发现小于屏幕宽度的图片并不会被拉的屏幕一样宽

    WKUserContentController *userContentController = [[WKUserContentController alloc] init];

    WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];

   // 自适应屏幕宽度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 *wkUserScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];

    // 添加自适应屏幕宽度js调用的方法

    [userContentController  addUserScript:wkUserScript];

    wkWebConfig.userContentController= userContentController;

    WKWebView*webview =[[WKWebViewalloc]initWithFrame:self.view.boundsconfiguration:wkWebConfig];

    webview.navigationDelegate =self;

    [webviewloadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://app.elcst.com/index.php?ctl=goods&act=goods_body&goods_id=1600"]]];//https://baidu.com

    [self.viewaddSubview:webview];

第二种:

实现这个WKNavigationDelegate 代理方法,解决了第一种方法存在的不足

- (void)webView:(WKWebView*)webView didFinishNavigation:(null_unspecifiedWKNavigation*)navigation{

    [webViewevaluateJavaScript:@"var script = document.createElement('script');"

     "script.type = 'text/javascript';"

     "script.text = \"function ResizeImages() { "

     "var myimg,oldwidth;"

     "var maxwidth = 1000.0;" // UIWebView中显示的图片宽度

     "for(i=0;i

     "myimg = document.images[i];"

     "oldwidth = myimg.width;"

     "myimg.width = maxwidth;"

     "}"

     "}\";"

     "document.getElementsByTagName('head')[0].appendChild(script);ResizeImages();" completionHandler:nil];

}

相关文章

  • wkwebview手机屏幕适配

    第一种:发现小于屏幕宽度的图片并不会被拉的屏幕一样宽 WKUserContentController *use...

  • WKWebView加载html图片过大

    WKWebView加载html图片过大,将图片缩放适配屏幕方法

  • WKWebView加载网页自适应大小

    在使用WKWebView加载html页面时, 有时候页面显示会变的很小, 这是因为原网页没有做手机屏幕尺寸的适配,...

  • LayaAir屏幕适配

    LayaAir屏幕适配 官方教程链接:LayaAir实战开发11-屏幕适配 屏幕适配 随着移动端设备(手机、平板、...

  • 解决在UIWebView上页面显示正常,升级成WKWebView

    有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不...

  • WKWebView加载的网页自适应大小

    有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不...

  • Android屏幕适配

    屏幕适配相关概念主流适配方案 一、屏幕适配相关概念 1、屏幕尺寸单位:英寸表示:手机对角线的物理尺寸 2、屏幕分辨...

  • 微信小游戏屏幕适配

    作者: 何永峰;标签: 屏幕适配 屏幕适配 适配都是老生常谈,移动端要根据手机屏幕适配,PC端也有时候根据不同的...

  • 屏幕适配的总结笔记

    一、屏幕适配-autoresizing简单使用 1、为什么要屏幕适配? > iphone手机屏幕尺寸呈现多样化。 ...

  • 手机屏幕适配

    前言 公司有很多要根据样式自动改变位置的需求,安卓机型各种各样,适配起来就是一个坑啊,今天把大致的坑填一下,供大家...

网友评论

    本文标题:wkwebview手机屏幕适配

    本文链接:https://www.haomeiwen.com/subject/aidphftx.html