iosmacoswkwebviewmac-catalyst

WKWebView content is too small when running as a Catalyst app on Mac


I started porting my iOS app (which works on iPhone and iPad) over to Mac via the Catalyst route but WKWebView is behaving very strange. All the content is too small, it looks like it thinks the monitor is 2 times bigger.

The website I am displaying is responsive and works correctly on iOS devices as well as a Mac in Safari. On iOS it looks the same in Safari and WKWebView but with Catalyst and Mac Safari, the Catalyst version is much smaller.

I also tried this with Google.com and the issue is the same.

Anyone knows what might be happening? Since this doesnt happen just to the single site, I guess the issue is with WKWebView?


Solution

  • Are you using the Mac or iPad idiom for your Catalyst app? The “iPad” idiom, which is the default (and only option for apps that support Catalina), will downscale your entire app to 77% it’s original size. Read more here: https://developer.apple.com/documentation/uikit/mac_catalyst/choosing_a_user_interface_idiom_for_your_mac_app

    My guess is that your app is being downscaled, including the web content. You could fix that by switching to the Mac idiom. If that’s not an option for whatever reason, maybe you could try scaling the web content back up with CSS?