iOS使用WKWebView加载HTML5不显示屏幕宽度的问题解决

最近在项目中我们的商品详情页是一个后台返回的图片标签。需要我们自己去写一个HTML5标签进行整合，(相当于重新写了一个HTML页面)

:ok_hand:那就没办法了，我就自己写一个标签咯，应该不难吧。嘻嘻嘻嘻~~~~~

dispatch_async(dispatch_get_main_queue(), ^{
      if(self.detailModel.details){
       //这里是自己写的简单的加载H5
        NSString *header =@"<head><meta name=\viewport\content=\width=device-width, initial-scale=1.0, user-scalable=no\> <style>body,html{width: 100%;height: 100%;}*{margin:0;padding:0;}img{max-width:100%;display:block; width:auto; height:auto;}</style></head>";
        NSString *html = [NSString stringWithFormat:@"<html>%@<body>%@</body></html>",header,self.detailModel.details];
        [self.webView loadHTMLString:html baseURL:nil];
        }
      });

得，那我就先用UIWebView写的，调了半天结果就是不占据屏幕宽度，好烦啊。(想对着自锤两下)。找资料原来可以设一个属性就可以解决，豪嗨心呀！

没设置属性之前是这个鬼样子的

使用[_webView setScalesPageToFit:NO]; 这个属性就好了，这个属性的作用是是都缩放到屏幕大小。好了，UIWebView使用这个却解决了。

///////////////////////..............................告一段落

但是WKWebView呢？因为一般H5加载需要一点点时间并且也想加一个进度条的效果，这样体验会更加的好一点。当H5没有加载完的时候用户滑动页面会卡住(因为scrollerView的ContentSize还不确定)。所以一般是在加载完成后再设置scrollerView的ContentSize。废话不多说直接上代码

-(WKWebView *)webView {
  if (!_webView) {
    _webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, iPhone5sHeight(375+135*PXSCALEH+285*PXSCALEH), screenW, screenH-50)];
    WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
    WKUserContentController *content = [[WKUserContentController alloc]init];
    // 自适应屏幕宽度js
    NSString *jSString = @"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:jSString injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    // 添加自适应屏幕宽度js调用的方法
    [content addUserScript:wkUserScript];
    wkWebConfig.userContentController = content;

    _webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, iPhone5sHeight(375+135*PXSCALEH+285*PXSCALEH), screenW, screenH-50) configuration:wkWebConfig];
    _webView.UIDelegate = self;
    _webView.navigationDelegate = self;
  }
  return _webView;
}

到这里适配一下就好了，看效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • iOS11 WKWebView 无法加载内容的解决方法

    iOS11 WKWebView 无法加载内容的解决方法

    问题描述: iOS9和iOS10用WKWebView加载URL都没有问题,iOS11却是一片空白 可能是用了 NSMutableURLRequest ,iOS11貌似不支持 NSMutableURLRequest ,无论是用 UIWebView 还是 WKWebView ,都不支持 NSMutableURLRequest 解决方法参考 if #available(iOS 11, *) { let request = NSURLRequest.init(url: URL.init(string:

  • ios wkwebview离线化加载h5资源解决方案

    思路: 使用NSURLProtocol拦截请求转发到本地. 1.确认离线化需求 部门负责的app有一部分使用的线上h5页,长期以来加载略慢... 于是考虑使用离线化加载. 确保[低速网络]或[无网络]可网页秒开. 2.使用[NSURLProtocol]拦截 区别于uiwebview wkwebview使用如下方法拦截 @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [su

  • iOS使用WKWebView加载HTML5不显示屏幕宽度的问题解决

    最近在项目中我们的商品详情页是一个后台返回的图片标签.需要我们自己去写一个HTML5标签进行整合,(相当于重新写了一个HTML页面) :ok_hand:那就没办法了,我就自己写一个标签咯,应该不难吧.嘻嘻嘻嘻~~~~~ dispatch_async(dispatch_get_main_queue(), ^{ if(self.detailModel.details){ //这里是自己写的简单的加载H5 NSString *header =@"<head><meta name=\v

  • vue 项目 iOS WKWebView 加载

    1.首先让前端的同事打一个包(index.html,static文件包含css.资源文件.js等)导入项目: :warning: 注意: 把index.html放入项目根目录下,command+n创建一个资源文件.bundle,资源文件里也的包含一份 index.html 下面开始代码: 懒加载WKWebView 引入#import <WebKit/WebKit.h> #import <WebKit/WKWebView.h> 继承 WKNavigationDelegate,WKUI

  • IOS开发中加载大量网络图片优化方法

    IOS开发中加载大量网络图片如何优化 1.概述 在IOS下通过URL读一张网络图片并不像其他编程语言那样可以直接把图片路径放到图片路径的位置就ok,而是需要我们通过一段类似流的方式去加载网络图片,接着才能把图片放入图片路径显示.比如: -(UIImage *) getImageFromURL:(NSString *)fileURL { //NSLog(@"执行图片下载函数"); UIImage * result; NSData * data = [NSData dataWithCont

  • IOS中Weex 加载 .xcassets 中的图片资源的实例详解

    IOS中Weex 加载 .xcassets 中的图片资源的实例详解 前言: 因为 .xcassets 中的图片资源只能通过 imageNamed: 方法加载,所以需要做一些特殊处理,才能提供给 Weex 使用(PS:纯属娱乐,因为 Weex 跨平台的特性,这种针对某一端做实现的方案实用价值并不大). 方案 观察 WeexSDK 发现有 WXImgLoaderProtocol 这个协议,这个协议包含了下面的方法: - (id<WXImageOperationProtocol>)downloadI

  • android WebView加载html5介绍

    Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi.hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍 三种解决方式:1 viewport属性 2 CSS控制 3 JS控制 1 viewport属性放在HTML的<meta>中 Html代码 复制代码 代码如下: <SPANstyle="FONT-SIZE: x-small"> <

  • IOS中UIWebView加载Loading的实现方法

    第一种方法:使用UIView and UIActivityIndicatorView 复制代码 代码如下: //创建UIWebView WebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 44, 320, 400)]; [WebView setUserInteractionEnabled:NO]; [WebView setBackgroundColor:[UIColor clearColor]]; [WebView setDelega

  • ios弹幕高效加载实现方式实例代码

    ios弹幕高效加载实现方式实例代码

    看直播的童鞋们应该会经常看到满屏幕的滚动弹幕,看到密密麻麻的弹幕第一印象就是怎么样高效加载来避免卡顿,弹幕组成部分包含用户头像.用户昵称.弹幕的内容.表情等,本文介绍的实现原理就是把这几部分绘制成一张图片,然后通过定时器移动弹幕图片,当图片不在屏幕范围内即销毁. 先看下效果 下面我会详细介绍下实现原理 1 .获取弹幕数据来源,因为我是模拟生成弹幕,弹幕的数据存放在工程里的plist文件中 emotions存放这条弹幕的表情,type表示是否是自己发的,text表示弹幕内容,userName表示用

  • spring boot加载资源路径配置和classpath问题解决

    1.spring boot默认加载文件的路径: /META-INF/resources/ /resources/ /static/ /public/ 我们也可以从spring boot源码也可以看到: private static final String[] CLASSPATH_RESOURCE_LOCATIONS = { "classpath:/META-INF/resources/", "classpath:/resources/", "classp

  • 详解iOS webview加载时序和缓存问题总结

    详解iOS webview加载时序和缓存问题总结

    iOS webView的加载时序 UIWebView加载顺序: - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSLog(@"开始请求webview:%@",request.URL.relativeString); return YES; } -

随机推荐