"loadHTMLString" height width issue with WKWebView

Question

I am trying to load HTML content to WKWebView, It does not load properly the same as screen height/width, same code is working fine with UIWebView, See the following code

webView.loadHTMLString(htmlString!, baseURL: nil)

HTML string content <style type="text/css"> #container { width: 667px; height: 375px; margin: 0 auto } </style> 667px is screen height and 375px is screen width.

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

What can I do to solve this issue?

try to change webView contentMode, it should resize its content — Alexandr Kolesnik
– Alexandr Kolesnik, Commented Jul 25, 2019 at 11:01
I have tried contentMode with AspectFill, AspectFit, scale to Fill but not getting proper output. — AtulParmar
– AtulParmar, Commented Jul 25, 2019 at 11:10

ishwar lal janwa · Accepted Answer · 2019-07-25 12:30:19Z

11

Add headerString before your html code and try it Like below

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)

answered Jul 25, 2019 at 12:30

ishwar lal janwa

5345 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AtulParmar Over a year ago

Thanks @ishwarLalJanwa, It's working but, If I set leading and trailing spaces 30 pixels between WKWebView and main view then it will show horizontally scroll, I don't want to scroll then what can I do for this.

AtulParmar Over a year ago

How can I fit chart exactly to WKWebView (same as WKWebView size)

Collectives™ on Stack Overflow

"loadHTMLString" height width issue with WKWebView

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related