Swift中WebView通过loadRequest加载HTML时如何增大字体？

Hey there! Let's sort out that tiny font problem in your WebView. I’ve got a few solid solutions for you, depending on what works best for your setup:

1. Tweak the Local HTML File (Most Direct Fix) #

The simplest way is to adjust your HtmlCode.html directly to control font size and viewport scaling. Add these changes to the <head> section:

Add a Proper Viewport Meta Tag #

This ensures your content scales correctly to the device screen:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Set a Base Font Size #

Define a clear font size for the body (adjust the pixel value to your liking):

<head>
  <!-- ... existing viewport tag ... -->
  <style>
    body {
      font-size: 18px; /* Increase this for larger text */
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Matches iOS system font for consistency */
    }
    /* Optional: Make headings larger too */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
  </style>
</head>

For responsive scaling that adapts to different screen sizes, use rem units with a dynamic root font size:

<style>
  html {
    font-size: 16px; /* Base size for small screens */
  }
  @media screen and (min-width: 375px) {
    html { font-size: 18px; } /* Larger size for iPhone SE+/8+ etc. */
  }
  @media screen and (min-width: 414px) {
    html { font-size: 20px; } /* Even larger for iPhone X/11+ */
  }
  body { font-size: 1rem; }
</style>

2. Adjust WebView Settings (No HTML Edits Needed) #

If you can’t modify the HTML file, use WebView properties or JavaScript injection to resize text.

Enable Page Scaling (UIWebView or WKWebView) #

Allow the WebView to scale the page to fit the screen (note: this lets users zoom if you don’t restrict it):

// For WKWebView
webView.scalesPageToFit = true
webView.minimumZoomScale = 1.0 // Prevent zooming out too far
webView.maximumZoomScale = 2.0 // Limit maximum zoom level

// For older UIWebView (deprecated, but included for reference)
webView.scalesPageToFit = true
webView.scrollView.minimumZoomScale = 1.0
webView.scrollView.maximumZoomScale = 2.0

Inject JavaScript to Override Font Size #

For more control, inject JavaScript after the page finishes loading. First, set the navigation delegate for your WKWebView:

webView.navigationDelegate = self

Then implement the didFinish delegate method to run the font-resizing script:

extension YourViewController: WKNavigationDelegate {
  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // Script to set body font size and disable automatic text scaling
    let fontSizeScript = """
      document.body.style.fontSize = '18px';
      document.body.style.webkitTextSizeAdjust = '100%';
      // Optional: Adjust all paragraph tags too
      const paragraphs = document.getElementsByTagName('p');
      for (let p of paragraphs) { p.style.fontSize = '18px'; }
    """
    
    webView.evaluateJavaScript(fontSizeScript) { result, error in
      if let error = error {
        print("Error adjusting font size: \(error.localizedDescription)")
      }
    }
  }
}

3. Check for Conflicting CSS #

If none of the above works, double-check your HTML for hardcoded small font sizes—sometimes inline styles or existing CSS might override your changes. Use the WebView’s inspection tools (in Safari’s Develop menu) to debug the applied styles.

内容的提问来源于stack exchange，提问作者gowtham