WKWebView
UIWebView
scalesPageToFit
iOS Development
WebView Scaling

WKWebView equivalent for UIWebView's scalesPageToFit

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

WKWebView does not have a direct property equivalent to UIWebView.scalesPageToFit. If you need similar behavior, the usual solution is to make the web content responsive through a viewport meta tag or injected JavaScript rather than trying to find a one-line API replacement.

Core Sections

Why there is no direct replacement

scalesPageToFit belonged to UIWebView, which tried to scale page content to fit the view automatically. WKWebView took a different approach and does not expose that same knob. The assumption is that modern web content should define its own viewport behavior.

So the real replacement is not a UIKit property. It is page-level layout control.

Best case: fix the HTML itself

If you control the HTML, add a viewport meta tag.

html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

That tells mobile Safari and WKWebView how to size the page relative to the device width. In many cases, this is the cleanest equivalent to the old "fit page to width" behavior.

Inject the viewport tag when you do not control the page

If you do not own the HTML source, inject a viewport tag with JavaScript after the page loads.

swift
1import WebKit
2
3let webView = WKWebView(frame: .zero)
4let script = """
5var meta = document.createElement('meta');
6meta.name = 'viewport';
7meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0';
8document.getElementsByTagName('head')[0].appendChild(meta);
9"""
10
11webView.evaluateJavaScript(script, completionHandler: nil)

In production code, you usually run this after navigation completes or via a user script attached to the configuration.

Use a WKUserScript for consistent injection

swift
1import WebKit
2
3let source = """
4var meta = document.createElement('meta');
5meta.name = 'viewport';
6meta.content = 'width=device-width, initial-scale=1.0';
7document.head.appendChild(meta);
8"""
9
10let userScript = WKUserScript(source: source,
11                              injectionTime: .atDocumentEnd,
12                              forMainFrameOnly: true)
13let controller = WKUserContentController()
14controller.addUserScript(userScript)
15
16let config = WKWebViewConfiguration()
17config.userContentController = controller
18
19let webView = WKWebView(frame: .zero, configuration: config)

This is often more reliable than calling evaluateJavaScript ad hoc after each load.

Do not confuse scaling with zoom configuration

WKWebView scaling issues are often really content-layout issues. Disabling or enabling user zoom is different from making the content fit the view. If the page width is designed for desktop and lacks a proper viewport, zoom settings alone will not recreate scalesPageToFit behavior cleanly.

Another useful distinction is whether you need content to fit once or whether you need users to zoom manually. scalesPageToFit often blurred those concerns in old code. In WKWebView, automatic fit is usually handled through the viewport, while user zoom is a separate interaction choice controlled by the page's own meta settings and CSS behavior.

If the page is already responsive, you may not need any injected workaround at all.

Common Pitfalls

  • Looking for a direct WKWebView property when the equivalent behavior is usually controlled by HTML viewport rules.
  • Injecting JavaScript too late in the page lifecycle and wondering why the page still lays out incorrectly.
  • Treating user zoom and page fitting as the same problem when they are not.
  • Forgetting that pages you do not control may still override or conflict with injected viewport behavior.
  • Migrating from UIWebView without rethinking whether the web content itself should become responsive.

Summary

  • 'WKWebView has no one-line equivalent to UIWebView.scalesPageToFit.'
  • The usual replacement is a correct viewport meta tag.
  • If you control the page, fix the HTML directly.
  • If you do not, inject a viewport rule with JavaScript or a WKUserScript.
  • Think of this as a web-content layout problem, not just a missing iOS property.

Course illustration
Course illustration

All Rights Reserved.