在開發(fā)過程中很多時候為了節(jié)約時間成本嵌套一些H5頁面，頁面的內(nèi)容有的在H5代碼里做過適配有的沒做過，這就造成了有些頁面在移動設(shè)備上走形。下面說一下工程中遇到的一個問題：頁面文字適應(yīng)而圖片沒有適應(yīng)，頁面顯示為文字在屏幕寬度之內(nèi)而圖片保留了網(wǎng)頁端的大小，使webView橫向容量非常大。。。

解決方式是調(diào)用JS語言，調(diào)整一下其中圖片的高度，這個時機可以選擇在webView的代理方法里，代碼如下

- (void)webViewDidFinishLoad:(UIWebView *)webView {

    NSString *js = @"function imgAutoFit() { \

    var imgs = document.getElementsByTagName('img'); \

    for (var i = 0; i < imgs.length; ++i) {\

    var img = imgs[i];  \

    img.style.maxWidth = %f;  \

    } \

    }";

    js = [NSString stringWithFormat:js, [UIScreen mainScreen].bounds.size.width - 20];

    [_webView stringByEvaluatingJavaScriptFromString:js];

    [_webView stringByEvaluatingJavaScriptFromString:@"imgAutoFit()"];

}

這段代碼表示遍歷H5頁面中所有的圖片并按比例縮放。

完成這步之后會發(fā)現(xiàn)圖片已經(jīng)適配OK了，但是底部會空出很大一部分空白，這是因為webview加載完之后容量固定了，但是適配之后實際內(nèi)容高度變小了，留出了一片空白。這個時候需要再次調(diào)用JS調(diào)整頁面高度，代碼如下：

    NSString * clientheight_str = [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight"];

    float clientheight = [clientheight_str floatValue];

    //設(shè)置到WebView上

    _webView.frame = CGRectMake(0, 0, self.frame.size.width, clientheight);

    //獲取WebView最佳尺寸（點）

    CGSize frame = [webView sizeThatFits:_webView.frame.size];

    //獲取內(nèi)容實際高度（像素）

    NSString * height_str= [_webView stringByEvaluatingJavaScriptFromString: @"document.getElementById('webview_content_wrapper').offsetHeight + parseInt(window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('margin-top'))  + parseInt(window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('margin-bottom'))"];

    float height = [height_str floatValue];

    //內(nèi)容實際高度（像素）* 點和像素的比

    height = height * frame.height / clientheight;

最后得到的height就是壓縮圖片后的實際高度。關(guān)于JS這一塊兒的了解不是很多，這部分代碼是從別處搜集的，還是比較實用的，記錄一下。

如果這篇文章對您有幫助, 請把下面的愛心點一下