Question

我正在将一个简单的html字符串加载到WKWebView中，我的目标是在该webview中显示一个全屏图像。

问题是图像的缩放比例是预期的两倍。

我只是使用

加载WKWebView

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

我期待图像全屏并适合屏幕

但我得到的图像似乎是屏幕分辨率的两倍（不是左下角的文字（

我尝试使用initial-scale和maximum-scale

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

但它不起作用。

此外，这似乎只适用于HTML中base64编码的图像，但这是我需要的。

HTML

<!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

Answer 1

我添加了，并且可以正常工作。

HTML是：

      <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>

WKWebView不尊重width = device-width

1 个答案: