How to force WKWebView to show mobile version of the site on iPad?

Question

Created Feb ’21

Replies 2

Boosts 0

Views 5.4k

Participants 3

For some reason we cannot force mobile site presentation in WKWebView on iPad. We tried different things like installing different customUserAgent on webView, or using

Code Block - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction preferences:(WKWebpagePreferences *)preferences decisionHandler:(void (^)(WKNavigationActionPolicy, WKWebpagePreferences *))decisionHandler  API_AVAILABLE(ios(13.0)){
    preferences.preferredContentMode = WKContentModeMobile;
    if (@available(iOS 14.0, *)) {
        preferences.allowsContentJavaScript = YES;
    } else {
        // Fallback on earlier versions
    }
    decisionHandler(WKNavigationActionPolicyAllow, preferences);
}

Nothing seems help and the site shows as desktop which hides all kinds on buttons on the bottom of the page. Safari displays the site perfectly as a mobile version and resizes it properly. What can I do else in order to show the site as mobile?

Boost

Answer 1

Tulakshana OP

Jun ’21

Assuming the website you are loading uses User-Agent to change content/layout/presentation the following will work.

            let config = WKWebViewConfiguration()
            
            if #available(iOS 13.0, *) {
                /**
                 In iOS 13 and above WKWebViews in iPad has the ability to render desktop versions of web pages.
                 One of the properties they change to support this is the User-Agent.
                 Therefore forcing the WKWebView to load the mobile version.
                 */
                let pref = WKWebpagePreferences.init()
                pref.preferredContentMode = .mobile
                config.defaultWebpagePreferences = pref
            }
            
            _webView = WKWebView.init(frame: CGRect.zero, configuration: config)

1

Answer 2

runitalready OP

Jan ’23

If the WKWebView has already been initialized via Storyboard, you can simply set

_webView.configuration.defaultWebpagePreferences.preferredContentMode = WKContentModeMobile;

1