iOS Question Textsize is smaller in WKWebview than webview

watesoft

Active Member
Licensed User
Longtime User
For the reason of old API, I change webview to WKWebview in my app, but textsize is smaller in WKWebview than webview.
I search the forums and find:https://stackoverflow.com/questions...tent-to-render-at-same-magnification-as-uiweb.

In my app,I use HtmlCSS in DBUtils:
B4X:
HtmlCSS = "table {meta name:viewport; content-initial-scale:1.0;width: 100%;border: 1px solid #cef;text-align: left;word-wrap: break-word;word-break: break-all; }" _
        & " th {font-weight: bold;font-size:1.1em; background-color: #acf;    border-bottom: 1px solid #cef;text-align: center;}" _
        & "th:first-child a{text-decoration:none;text-align: top;}" _
        & "td:first-child {width:" & Text_Format(0) & ";}" _
        & "td{font-size:" & Text_Format(1) & ";}" _
        & "td,th {padding: 1px 1px; }" _
        & ".odd {background-color: #def; } .odd td {border-bottom: 1px solid #cef; }" _
        & "td:first-child a{text-decoration:none;}" _
        & "td:first-child {text-align: Left;}" _
        & "td:first-child {vertical-align:top;}"

how to add <meta name="viewport" content="initial-scale=1.0" /> to HtmlCSS above code. I can't do it successfully
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
Tip: use smart strings literal
B4X:
HtmlCSS =  $"table {meta name:viewport; content-initial-scale:1.0;width: 100%;border: 1px solid #cef;text-align: left;word-wrap: break-word;word-break: break-all; }
        th {font-weight: bold;font-size:1.1em; background-color: #acf;    border-bottom: 1px solid #cef;text-align: center;}
        th:first-child a{text-decoration:none;text-align: top;}
        td:first-child {width:${Text_Format(0)};}
        td{font-size: ${Text_Format(1)};}
        td,th {padding: 1px 1px; }
        .odd {background-color: #def; } .odd td {border-bottom: 1px solid #cef; }
        td:first-child a{text-decoration:none;}
        td:first-child {text-align: Left;}
        td:first-child {vertical-align:top;}"$
how to add <meta name="viewport" content="initial-scale=1.0" /> to HtmlCSS above code. I can't do it successfully
You need to add it to the html <head> section, not to HtmlCSS.
It should be done in the code that uses HtmlCSS to create the html string.
 
Upvote 0

watesoft

Active Member
Licensed User
Longtime User
Tip: use smart strings literal
B4X:
HtmlCSS =  $"table {meta name:viewport; content-initial-scale:1.0;width: 100%;border: 1px solid #cef;text-align: left;word-wrap: break-word;word-break: break-all; }
        th {font-weight: bold;font-size:1.1em; background-color: #acf;    border-bottom: 1px solid #cef;text-align: center;}
        th:first-child a{text-decoration:none;text-align: top;}
        td:first-child {width:${Text_Format(0)};}
        td{font-size: ${Text_Format(1)};}
        td,th {padding: 1px 1px; }
        .odd {background-color: #def; } .odd td {border-bottom: 1px solid #cef; }
        td:first-child a{text-decoration:none;}
        td:first-child {text-align: Left;}
        td:first-child {vertical-align:top;}"$

You need to add it to the html <head> section, not to HtmlCSS.
It should be done in the code that uses HtmlCSS to create the html string.

Hi Erel,Question is solved,many tks for your advice. but i don't add it in the html string but use js. Code show as below:

B4X:
Sub WKWebview_PageFinished (Success As Boolean, Url As String)
    WKWebview.EvaluateJavaScript("tag", "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('tagname')[0].appendChild(meta);")
End Sub

tagname:including table,head,body,html etc in html string.
 
Upvote 0
Top