UIWebView - 加載外部網站，以編程方式設置初始縮放比例，並允許用戶隨后進行縮放

Question

有可能做到以上所有嗎？ SO給了我一個偉大的方式來設定初始縮放比例在這里 。 即，要在我的webViewDidFinishLoad方法中包含以下行：

[webView stringByEvaluatingJavaScriptFromString: @"document.body.style.zoom = 5.0;"];

但我仍然不能做的是允許用戶在程序初始設置后更改縮放比例。 如果我將scalePagesToFit設置為NO，則用戶無法更改縮放比例。 如果我將scalePagesToFit設置為YES，它將覆蓋我的程序化縮放。

有人可以幫忙嗎？

編輯：謝謝你的回應。 但是，如果我縮放scrollView，事情就會模糊不清。

Answer 1

您可以添加或修改<meta name='viewport'標記來實現此目的。 有關meta / viewport標記的Apple文檔：

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

以下是加載文檔后添加標記的示例：

- (void) webViewDidFinishLoad:(UIWebView *)webView
{
    NSString* js = 
    @"var meta = document.createElement('meta'); " \
     "meta.setAttribute( 'name', 'viewport' ); " \
     "meta.setAttribute( 'content', 'width = device-width, initial-scale = 5.0, user-scalable = yes' ); " \
     "document.getElementsByTagName('head')[0].appendChild(meta)";

    [webView stringByEvaluatingJavaScriptFromString: js];        
}

如果您要加載的網頁提供現有的元標記，則可能需要對其進行修改，而不是嘗試向DOM添加新的元元素。 這個SO問題討論了這個技術：

我可以動態更改移動版Safari中的視口元標記嗎？

在我的測試應用程序中，我將UIWebView scalesPageToFit設置為YES。

Answer 2

這實際上很棒。 我需要具有縮放功能，而scalePagesToFit為NO。 雖然你的代碼TomSwift沒有按照我的需要工作，但是稍作調整就可以了。

我在iOS 6.x上運行它...就像一個魅力。

NSString* js =
        @"var meta = document.createElement('meta'); " \
        "meta.setAttribute( 'name', 'viewport' ); " \
        "meta.setAttribute( 'content', 'width = device-width, initial-scale=1.0, minimum-scale=0.2, maximum-scale=5.0; user-scalable=1;' ); " \
        "document.getElementsByTagName('head')[0].appendChild(meta)";

[webView stringByEvaluatingJavaScriptFromString: js]; 

真棒小費湯姆。

Answer 3

看起來可以從iOS 5.x開始訪問底層的UIScrollView 。

在webViewDidFinishLoad:您可以請求縮放，例如：

[webView.scrollView zoomToRect:CGRectMake(0.0, 0.0, 50.0, 50.0) animated:YES];

即使scalesPageToFit設置為YES這似乎也可以工作。

Answer 4

與我的答案不同的是，您在設置寬度之前清除視口。

這允許在不重置屬性更改的情況下旋轉或調整Web視圖（在加載后）。

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    // Clear view port
    NSString* js = @"$('meta[name=viewport]').remove();";
    [webView stringByEvaluatingJavaScriptFromString: js];

    // Set content size
    js = [NSString stringWithFormat:@"var meta = document.createElement('meta');"
          "meta.setAttribute( 'name', 'viewport' ); "
          "meta.setAttribute( 'content', 'width = device-width, initial-scale = 5.0, user-scalable = yes' ); "
          "document.getElementsByTagName('head')[0].appendChild(meta);"];

    [webView stringByEvaluatingJavaScriptFromString: js];
}

Answer 5

嘗試更改設置這些命令的順序 - 首先將scalePagesToFit設置為YES，然后：

[webView stringByEvaluatingJavaScriptFromString: @"document.body.style.zoom = 5.0;"];