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())),
),
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-->
Related
I am loading the webview with local file by using below code,
<WebView
originWhitelist={["*"]}
allowFileAccess={true}
javaScriptEnabled={true}
androidLayerType={"hardware"}
source={Platform.OS === "android" ? { uri: "file:///android_asset/about.html" } : require("./constants/about.html")}
/>
Here, the "about.html" internally refers one another HTML file.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
color:black;font-family:arial;font-size:12px;
}
</style>
</head>
<body>
<p>Welcome</p>
<p>
Referring another Local HTML<a target="_blank" href=“another_Local.html">link</a>.
</p>
</body>
But this implementation is working fine iOS Platform, but the same is not working in Android. Please suggest.
You may need to use react-native-fs or expo-file-system to load any files in your react-native app.
In an android WebView I have vertical text with ruby tags with css to make the body reflow like pages
This is the activity code, it loads the text.html file into a WebView
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val webview = findViewById<WebView>(R.id.webview)
webview.loadUrl("file:///android_asset/text.html")
}
}
text.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body style="writing-mode: vertical-rl; width: 100vw; column-width: 100vh; margin: 0">
<p>
<ruby>漢字<rt>かんじ</rt></ruby>
<ruby>漢字<rt>かんじ</rt></ruby>
<ruby>漢字<rt>かんじ</rt></ruby>
... x 400
</p>
</body>
</html>
This is an image of what this produces
The ruby tags are getting cropped and are not reflowing properly.
The smaller characters are supposed to be next to the larger ones. According to mozilla the ruby tag is supported in android WebView.
I could not find any mention of this effect anywhere.
I have not been able to recreate this error in a chrome webview. What I mean to say is with the same css in chrome, the entire ruby tag reflows together.
Is this in fact a bug?
Or are there other css rules I can use to make the ruby display properly?
My problem appears on the internal Android browser in combination with JQuery Mobile. When I reload the current page the content shrinks to fit text into the listview.
More in Detail:
The code works fine on IPhone, mobile Desktop Tools and Androids Firefox. However on the internal Android browser I have this weird issue with the code beneath. See my Edit below.
What I've tried so far:
I've played a lot with the viewport meta tag. Anyhow, I don't think that's the problem, because the content gets displayed correct on every other site in my app.
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');
like these posts suggest:
JQuery Mobile Device Scaling
Full webpage and disabled zoom viewport meta tag for all mobile browsers
My Code:
<html>
<head>
<meta name="viewport" content="width=650">
<!-- CSS and Scripts-->
</head>
<body>
<!-- Page Wrapper -->
<div data-role="page">
<section data-role="content">
<h2>
Code Sample
</h2>
<div class="ui-grid-solo">
<p style="margin-bottom: 38px;">
A
B
C
</p>
</div>
<!-- Dynamic content-->
<ul data-role="listview" data-inset="false">
<!-- Use ?id to grab and display data (CodeBehind.vb)-->
</ul>
</section>
</div>
</body>
</html>
Has anyone an idea, or did fight with a similar problem?
Edit:
I'm on to something, the problem appears to happen in this peace of code:
<!-- Dynamic content-->
<ul data-role="listview" data-inset="false">
<!-- Use ?id to grab and display data (CodeBehind.vb)-->
</ul>
Normally the listView replaces to big text items with "dot dot dot" at the end so that they fit on the screen. In my case it still does that, but the text has way to many characters, before the shortening is happening. The result is, that everything scales down. How should I solve this?
Since I got no answers on this one, I post my fix:
Only on mobile safari browsers listView items don't seem to get shortened. Now I'm calling a function which does that manually on pageinit:
fixListView: function () {
var brokenAgent = "Safari";
var currentUserAgent = navigator.userAgent;
if (currentUserAgent.indexOf(brokenAgent) != -1) {
var listItemList = $('.long-text');
for (var i = 0; i < listItemList.length; i++) {
var text = listItemList[i].innerText;
if (text.length > 40) {
var newText = text.substr(0, 40);
listItemList[i].innerText = newText + "...";
}
}
}
}
Still not that happy with my fix, any ideas for improvement are welcomed!
I read all possible questions/response on stackoverflow, but i still can't do what i would like.
I created an application to show News
1. Used**Thoolika.ttf** Unicode font.
2.Now I am using **AnjaliOldLipi.ttf** font
3.Older data was in the form **c¬¥Vvp¢: d¡...**.
4.New data is in the form **സ ; ൂ ; പ ; ് ; പ ;** .
My problem is I can't justify this news inside a webview.For this,I am using html given below.
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=UTF-8 />
<meta name=viewport content=width=device-width; initial-scale=1.0; maximum-scale=5.0; user-scalable = yes /><style>#font-face { font-family: 'Anjali';src: url('file:///android_asset/fonts/**AnjaliOldLipi.ttf'**);}body { font-family: 'Anjali';}</style></head><body style=font-family:Anjali;margin:5px;><div style=padding:5px;**text-align:justify;** >
<span style=color:#3070AC;font-family:Anjali;font-size:20px;font-weight:bold;text-decoration:none;>NEWS TITLE</span><br>
<div style=width:100%;text-align:right;padding-top:2px;padding-right:2px;color:#BCBCBC;font-family:monospace;font-size:11px;><i>NEWS DATE</i></div></div>
<div style=padding-top:5px;padding-left:5px;padding-right:5px;color:#000000;font-family:Anjali;font-size:14px;text-decoration:none;text-align:;>
NEWS CONTENT
</div></body></html>
How can i align both left and right side of this webview(justify).
We're developing a jQuery Mobile application using ASP.NET 3.5, and we've run into a problem with lots of large, strangely shaped, and quite distracting tap highlights. I discovered that the inclusion of a ScriptManager in the page seemed to be the culprit, in our case. Here's a simple .aspx page that should reproduce the problem (I'm testing on Android 2.2.2 and iOs 4.2.6).
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManager"></asp:ScriptManager>
<h1>Oh Hai!</h1>
</form>
</body>
</html>
With the ScriptManager, that h1 tag will produce a tap highlight each time it's touched. Lose the ScriptManager, and the tap highlight goes away. Assuming that the ScriptManager is necessary, is there anything better than doing something like:
<script type="text/javascript">
$(function () {
$('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
})
</script>
Adding a css rule to our stylesheet doesn't work, because the client-side initialization of the ScriptManager seems to override it somehow.
ScriptManager is adding a click handler to the form element, so in fact webkit is intercepting clicks on the form - H1 just happens to be within it from a DOM perspective.
You could prove this by moving the <form> tag after the <H1></H1> tags, naturally that won't be practical for all your elements.
I think the approach of adding "-webkit-tap-highlight-color" is valid but perhaps you need to do this after script manager does its stuff:
$(document).ready(function(){
$('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
});
You could also experiment with adding the css inline to specific form/h1 elements just to eliminate css cascading or script issues.