Hi there,
I use WebView to display html content locally using setHtml() and it works perfectly fine on iphone 6/6+ devices. However when it comes to iphone 5, there is a very frustrating problem that sometimes the WebView shows up ok, but then most of the times, the css styling does not apply well that it makes the font size too big for the body content. (With the same web page, sometimes its ok, but then sometimes its fonts ize gets really big)
Not sure if anyone has had this problem? I would much appreciate if someone can help me with this? Thanks in advance
Below is what I did for the html content with details are passed from the 'args' variable:
var style = "<html><head> <style> body { font-family: "+ Alloy.Globals.Fonts.Regular +"; font-weight: 400; line-height: 1.42857143; font-size: "+ Alloy.Globals.FontSize.web +" !important; color: #333333; background-color: #fff; text-align: center; }
.container {
margin-right: auto;
margin-left: auto;
}
#main {
padding: 0 8px;
margin-bottom: 30px;
}
#article-content {
overflow-x: hidden !important;
background-color: white !important;
margin-top: 70px !important;
}
.page-header {
font-family: "+ Alloy.Globals.Fonts.Vani +";
font-size: "+ Alloy.Globals.FontSize.webHeader +";
padding-bottom: 0px;
margin-top: 20px;
margin-bottom: 0px;
text-align: left;
}
.article-body {
padding: 10px 0 50px 0;
font-family: "+ Alloy.Globals.Fonts.ArticleContent +" !important;
font-weight: normal !important;
font-size: "+ Alloy.Globals.FontSize.web +" !important;
text-align: left;
}
.article-body div,
.article-body p,
.article-body span{
font-family: "+ Alloy.Globals.Fonts.ArticleContent +" !important;
font-weight: normal !important;
font-size: "+ Alloy.Globals.FontSize.web +" !important;
line-height: 1.6 !important;
margin-bottom: 1.5em !important;
margin: 0 0 10px !important;
}
#article-content .article-body p {
line-height: 1.6;
margin-bottom: 1.5em;
margin: 0 0 10px;
}
.article-body h2 {
font-size: "+ Alloy.Globals.FontSize.web +" !important;
}
.article-body ul{
line-height: 1.5625em !important;
color: #262626 !important;
padding: 0 10px !important;
}
.article-body ul li {
margin-left: 0 !important;
margin-left: 1em !important;
}
.article-body ul li a {
color: #000 !important;
border-bottom: 1px dotted !important;
}
.article-body img {
margin: 0 auto !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block !important;
vertical-align: middle !important;
}
figure {
margin: 0 0px 20px 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
}
figcaption {
color: #666;
padding: .75em 0;
border-bottom: 1px solid #ecf0f1;
font-size: "+ Alloy.Globals.FontSize.webCaption +";
}
a {
color: #337ab7;
text-decoration: none;
}
video {
width : 100%;
}
iframe {
width : 100%;
}
</style>
</head>"
var body = "<body>
<div class=\"container\" id=\"main\">
<section class=\"clearfix\" id=\"article-content\">
<h1 class=\"page-header headline\">"+ args.title + "</h1>
<div class=\"article-body\">"+ args.content + "</div>
</section>
</div>
</body></html>";
return style + body;
