CODEWITHSUNDEEP
ioswkwebview
Jan
Jan

Reputation: 7644

WKWebView not respecting width=device-width

I'm loading a simple html string into a WKWebView and my objective is to have a full screen image in that webview.

The problem is that the image seems to be scaled twice as big as expected.

I simply load the WKWebView using 

NSString *html = @"..."  // the content
[self.webView loadHTMLString:html baseURL:[[NSBundle mainBundle] bundleURL]];

I'm expecting the image to be full screen and fit the screen

enter image description here

But I get an image that seems to be twice as big as the screen resolution (not the text at the bottom left(

enter image description here

I tried playing with using the initial-scale and maximum-scale

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

But it does not work.

Also not that this seems to happen only for images that are base64 encoded in the HTML but this is something I need.

The HTML is 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width"/>
</head>

<img src="data:image/png;base64, ...">
<!-- <img src="http://placehold.it/750x1334"> -->
</body>
</html>

Here is the html complete HTML

Upvotes: 4

Views: 8669

Answers (1)

RomanV
RomanV

Reputation: 579

I added and it is working.

The HTML is:

      <html>
            <head>
                <meta name="viewport"  content="width=device-width, initial-scale=1, maximum-scale=1"/>
                <style>
                    img {
                        width:auto;
                        height:auto;
                        max-width:100%;
                        max-height:90vh;
                    }
                </style>
            </head>
        <body>
<!-- body container -->
        </body>
        </html>

Upvotes: 12

Related Questions