"loadHTMLString"在使用WKWebView时出现的高度和宽度问题

4

我正在尝试将HTML内容加载到WKWebView中,但它无法正确地加载与屏幕高度/宽度相同的内容。使用UIWebView时,相同的代码能够正常工作。请参见以下代码:

webView.loadHTMLString(htmlString!, baseURL: nil)

HTML字符串内容<style type="text/css"> #container { width: 667px; height: 375px; margin: 0 auto } </style>其中,667像素是屏幕的高度,375像素是屏幕的宽度。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Highcharts Example</title>

            <style type="text/css">
                #container {
                    width: 667px;
                    height: 375px;
                    margin: 0 auto
                }
            </style>
            </head>
    <body>
        <script src="https://code.highcharts.com/highcharts.js"></script>

        <div id="container"></div>


        <script type="text/javascript">

            Highcharts.chart('container', {   
                    //Chart code.
                             });
            </script>
    </body>
</html>

我该怎么解决这个问题?

在此输入图像描述


尝试更改webView的contentMode,它应该调整其内容大小。 - Alexandr Kolesnik
我已经尝试过AspectFill、AspectFit、Scale to Fill等contentMode,但是没有得到适当的输出。 - AtulParmar
1个回答

10
在你的HTML代码之前加上headerString并尝试以下方法,如下所示:
let description = "<p> HTML content <p>"
var headerString = "<header><meta name='viewport' content='width=device-width, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'></header>"
headerString.append(description)              
self.webView.loadHTMLString("\(headerString)", baseURL: nil)

谢谢@ishwarLalJanwa,它正在工作,但是,如果我在WKWebView和主视图之间设置前导和尾随空格为30像素,则会显示水平滚动条,我不想滚动,那我该怎么办。 - AtulParmar
如何将图表精确适配到 WKWebView(与 WKWebView 大小相同)? - AtulParmar

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接