UIWebview圖片過大，縮放至螢幕寬度
阿新 • • 發佈：2019-01-31
webview在手機上顯示的內容經常非常寬，顯示出來之後要手動縮放才能正常瀏覽。但如果用
C程式碼
則會被居中縮放的非常小，如圖：
（請無視我demo裡的title。。。）
其實html本身有一個縮放的方法,可以在<head>里加一個節點：
Html程式碼
content裡規定了這個介面:
最小縮放比例是0.1：minimum-scale=0.1
最大縮放比例是2.0：maximum-scale=2.0
允許使用者縮放：user-scalable=yes
當前縮放比是1.0：initial-scale=1.0
因此我們可以通過計算initial-scale來決定頁面顯示的時候縮放到什麼比例是正好充滿螢幕寬。
可以通過js獲取body的實際寬度：
Js程式碼
然後根據我們自己webview的寬度，就可以得到期待的initial-scale了：webViewwebView.frame.size.width/pageWidth；
下邊來說具體怎麼在iOS專案中實現：
第一步：js必須是在html載入完成後才能呼叫，因此在iOS專案中，需要先載入一次原始的html：
C程式碼
第二步：第一次載入偷偷載入完成後，在代理裡邊呼叫js獲取寬度，然後算出合適的縮放比例，並在<head>里加上我們需要的<meta>，然後再將新的html重新載入，載入完成後再顯示：
Java程式碼
效果如下：
C程式碼
- [self.webView setScalesPageToFit:YES];
則會被居中縮放的非常小，如圖：
（請無視我demo裡的title。。。）
其實html本身有一個縮放的方法,可以在<head>里加一個節點：
Html程式碼
-
<meta name="viewport" content="initial-scale=1.0, minimum-scale=0.1, maximum-scale=2.0, user-scalable=yes\">
content裡規定了這個介面:
最小縮放比例是0.1：minimum-scale=0.1
最大縮放比例是2.0：maximum-scale=2.0
允許使用者縮放：user-scalable=yes
當前縮放比是1.0：initial-scale=1.0
因此我們可以通過計算initial-scale來決定頁面顯示的時候縮放到什麼比例是正好充滿螢幕寬。
可以通過js獲取body的實際寬度：
Js程式碼
- document.body.scrollWidth
然後根據我們自己webview的寬度，就可以得到期待的initial-scale了：webViewwebView.frame.size.width/pageWidth；
下邊來說具體怎麼在iOS專案中實現：
第一步：js必須是在html載入完成後才能呼叫，因此在iOS專案中，需要先載入一次原始的html：
C程式碼
- //html是否載入完成
- isLoadingFinished = NO;
- //這裡一定要設定為NO
- [self.webView setScalesPageToFit:NO];
- [self.webView loadHTMLString:currentMail.htmlBody baseURL:nil];
- //第一次載入先隱藏webview
- [self.webView setHidden:YES];
-
self.webView.delegate = self;
第二步：第一次載入偷偷載入完成後，在代理裡邊呼叫js獲取寬度，然後算出合適的縮放比例，並在<head>里加上我們需要的<meta>，然後再將新的html重新載入，載入完成後再顯示：
Java程式碼
- #pragma mark - UIWebViewDelegate
- - (void)webViewDidFinishLoad:(UIWebView *)webView
- {
- //若已經載入完成，則顯示webView並return
- if(isLoadingFinished)
- {
- [self.webView setHidden:NO];
- return;
- }
- //js獲取body寬度
- NSString *bodyWidth= [webView stringByEvaluatingJavaScriptFromString: @"document.body.scrollWidth "];
- int widthOfBody = [bodyWidth intValue];
- //獲取實際要顯示的html
- NSString *html = [self htmlAdjustWithPageWidth:widthOfBody
- html:currentMail.htmlBody
- webView:webView];
- //設定為已經載入完成
- isLoadingFinished = YES;
- //載入實際要現實的html
- [self.webView loadHTMLString:html baseURL:nil];
- }
- //獲取寬度已經適配於webView的html。這裡的原始html也可以通過js從webView裡獲取
- - (NSString *)htmlAdjustWithPageWidth:(CGFloat )pageWidth
- html:(NSString *)html
- webView:(UIWebView *)webView
- {
- NSMutableString *str = [NSMutableString stringWithString:html];
- //計算要縮放的比例
- CGFloat initialScale = webView.frame.size.width/pageWidth;
- //將</head>替換為meta+head
- NSString *stringForReplace = [NSString stringWithFormat:@"<meta name=\"viewport\" content=\" initial-scale=%f, minimum-scale=0.1, maximum-scale=2.0, user-scalable=yes\"></head>",initialScale];
- NSRange range = NSMakeRange(0, str.length);
- //替換
- [str replaceOccurrencesOfString:@"</head>" withString:stringForReplace options:NSLiteralSearch range:range];
- return str;
- }
效果如下：