iOS 設定UIWebView 展示字型大小，顏色，展示佈局
阿新 • • 發佈：2018-12-23
有時不能返回H5，但是又要使用UIWebView的特性展示效果，這時可以將後臺返回的資料，一般為JSON，封裝為HTML，然後呼叫UIWebView的
方法載入。
就可以將HTML中第一個圖片設定為螢幕自適應大小。
效果為：
- (void)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;方法載入。
建議使用<p></p>標籤，因為可以方便的設定格式顯示；
封裝為HTML:
NSString *tem_HTML_Str = [NSString stringWithFormat:@"<p>%@</p><p>%@ %@</p>",[_dataDic objectForKey:@"title"],[_dataDic objectForKey:@"source"],[_dataDic objectForKey:@"releaseTime"]];
- (void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"頁面載入完畢"); // 設定字型顏色 [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[0].style.color= '#464E78'"]; // 設定字型大小 [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[0].style.fontSize= '30px'"]; // 設定字型邊距 [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[0].style.margin= '0'"]; // 設定其他標籤格式 [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[1].style.color= '#AEB3CF'"]; [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[2].style.webkitTextSizeAdjust= '100%'"]; [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[2].style.color= '#464E78'"]; }
代理方法裡面設定格式：
效果圖如下：- (void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"頁面載入完畢"); // 設定字型顏色 [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[0].style.color= '#464E78'"]; // 設定字型大小 [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[0].style.fontSize= '30px'"]; // 設定字型邊距 [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[0].style.margin= '0'"]; // 設定其他標籤格式 [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[1].style.color= '#AEB3CF'"]; [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[2].style.webkitTextSizeAdjust= '100%'"]; [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[2].style.color= '#464E78'"]; }
有時候需要設定圖片大小已適應螢幕，此時可以
[webView stringByEvaluatingJavaScriptFromString:"document.getElementsByTagName('img')[0].style.maxWidth= '100%'"];就可以將HTML中第一個圖片設定為螢幕自適應大小。
如果有多個圖片，則可以：
NSString *length_tem = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('img').length"];
for (int i = 0 ; i < [length_tem intValue]; i++) {
[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.getElementsByTagName('img')[%d].style.maxWidth= '100%%'",i]];
}效果為：
