Menu
I have html code that I need to render in webview to display HTML text editor styled content. The one and only option is to use webview. So, I implemented my API to send response particular <div> element and displayed it using official flutter webview. Android its displaying correctly and IOS font sized is very small(can't even read). What I am doing wrong?
Relevant code snippet:
var contentBase64 = base64Encode(const Utf8Encoder()
.convert(
"""<html>
<body style='"margin: 0; padding: 0;'>
<div>
$htmlString //my html code snippet coming from API
</div>
</body>
</html>"""));
//.....
WebView(
initialUrl: 'data:text/html;base64,$contentBase64',
// gestureRecognizers: Set()..add(Factory<VerticalDragGestureRecognizer>(()=>VerticalDragGestureRecognizer())),
),
910
Introduction. With the WebView Flutter plugin you can add a WebView widget to your Android or iOS Flutter app. On iOS the WebView widget is backed by a WKWebView, while on Android the WebView widget is backed by a WebView. The plugin can render Flutter widgets over the web view.
Like <!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>$ {yourHtml}</body></html> Additionally to the <meta> you can add <style> tag into the <head> section to scale the font:
As you may noticed from the images above, the rectangle shown on the iPhone Xs Max is way smaller than the one displayed on the iPhone 5s. That’s because Flutter won’t question whether the app is running on an iPhone 5s, an iPhone Xs Max or even a 13" iPad, the container will always be 40 x 60.
What is Flutter? If you are here, you probably already have a good enough understanding of what Flutter is, the most important aspect that you’ve got to keep in mind while reading through this article, is that Flutter allows us to have full control of every single pixel displayed on the screen. What’s this article about?
The reason is, you only wrapped with html element. You have to specify meta tag to responsive in IOS devices. To do that you also have to add head element as below:
var contentBase64 = base64Encode(const Utf8Encoder()
.convert(
"""<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
<body style='"margin: 0; padding: 0;'>
<div>
$htmlString
</div>
</body>
</html>"""));
In my opinion:
Android is smart enough to identify html code without <meta> with viewport, but IOS does not. You have to explicitly set viewport to mobile device, like you make webapp responsive to mobile devices.
It's better to wrap <!DOCTYPE html> annotation to render correctly.
This is what you need exactly to your code:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><!--rest of your html-->
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With