I need to display HTML formatted text in my Android app. I get HTML from the server. It looks something like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width: 9em; background-color: #00FF00;">
<img src="smiley.png" />
<pre>abc 123 456 789</pre>
</div>
</body>
</html>
When I put this in WebView I get the following result (image):
http://s11.postimg.org/gu3a6ybpf/Screenshot_2014_09_12_17_08_25.png
But I need to zoom in the WebView, so that the "div" (the green square) will match the screen from left to right. This is the result I am looking for (image):
http://s4.postimg.org/554ayxqot/Screenshot_2014_09_12_17_14_14.png
The result must look the same on all screen sizes (phones, tablets, ...) and all orientations (portrait, landscape).
I have tried everything and checked plenty of forums, but didn't found the solution to my problem. Can somebody please tell me how to get the result I want.
Thank you.
Related
So here is a tiny jsFiddle :
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
.navButton {
font-size:30px;
height:43px;
text-align: center;
}
</style>
</head>
<body>
<div style="display:inline-block">
<a class="navButton" href="#"><i class="fa fa-camera"></i></a>
<a class="navButton" href="#"><i class="fa fa-camera"></i></a>
<a class="navButton" href="#"><i class="fa fa-camera"></i></a>
</div>
<div style="display:inline-block">
<a class="navButton" href="#">Bla</a>
<a class="navButton" href="#">Bla</a>
<a class="navButton" href="#">Bla</a>
</div>
</body>
</html>
It behaves perfectly fine pretty much everywhere, but on my LG G2 and Galaxy Note 2 phones' native browser (it works fine on the Chrome app), when I press one of the right camera links, it displays a white rectangle which covers about half of the icon on the left of it, as follows (here I touched on the right camera):
Debugging this issue on chrome://inspect shows absolutely no clue: not a single CSS property of any of the elements changes when the link is pressed. When inspected, the display shows no margin or padding colouring in the elements. Using the developer tools, this white rectangle is spawned when forcing any of the three states. (:active, :hover, :focus)
This looks like... a bug? Even if so, any idea how I could avoid this effect with the same kind of rendering?
Also apparently, it's not actually white overlay, this defect just covers icons with "transparency", as shown in this image with a background-color: red on the body:
So this was the problem. As the answer to that question suggests, I managed to fix my issue by overriding the font files' order in my css, in order to put svg file in front:
#font-face {
font-family:'FontAwesome';
src:url('/font-awesome/fonts/fontawesome-webfont.eot');
src:url('/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg'),url('/font-awesome/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),url('/font-awesome/fonts/fontawesome-webfont.woff2') format('woff2'),url('/font-awesome/fonts/fontawesome-webfont.woff') format('woff'),url('/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}
If you do override the font in your custom CSS (and not modify the original Fontawesome CSS file, which I see as bad practice due to possible future updates of the framework), make sure to change the files paths to reach them.
When I test my development website on any Android mobile phone, the website doesn't fit full screen on the mobile screen. Attached is the snapshot. I' am just trying to make it mobile friendly.
I' am using wordpress with Twitter Boostrap to make my website. On my head tag, I have few meta tags that I found on the Internet for mobile friendly websites. Please note that this is not a responsive website.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1">
Please help?
If you were designing a responsive site, but want to "fix" the width of the site in mobile i.e. 800px max width, I found that my only solution was to update the initial scale size. What worked nice for me was something like this, notice the "initial-scale" value:
<meta name="viewport" content="width=device-width, initial-scale=0.4">
Hope this helps someone!
I have had recently the same issue on tablets/phones and fixed that with the following snippet.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#-webkit-viewport { width: device-width; }
#-moz-viewport { width: device-width; }
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
</style>
<script>
// Important for windows phone 8
if (navigator.userAgent.match(/IEMobile\/10\.0/))
{
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(document.createTextNode("#-ms-viewport{width:auto!important}"));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
</script>
Make sure you're using the responsive classes included with Bootstrap in order to allow for design within the Bootstrap framework. In Bootstrap, all content is on a 12 "column" grid, and then split up based on that grid.
In Bootstrap 2.x
<div class="container">
<div class="row">
<div class="span6">
Content here
</div>
<div class="span6">
Content here
</div>
</div>
</div>
will produce two divs that span the width of the page.
In Bootstrap 3, they changed their class names slightly to account for different window sizes. The same example, provided you're on a mobile, device would be:
<div class="container">
<div class="row">
<div class="col-xs-6">
Content here
</div>
<div class="col-xs-6">
Content here
</div>
</div>
</div>
You can remove responsiveness in Bootstrap 3 by following these steps:
http://getbootstrap.com/getting-started/#disable-responsive
More information can be found here: http://getbootstrap.com/css/#grid
I know it's an old question but since it shows up in google I thought I'd share the solution I came up with, in case anyone else needs it:
If your website isn't responsive, you don't need the extra meta tags at the header. Try to remove them and it should work as expected.
In my application there is a WebView and a button.
on button click I receive a HTML from a webservice with AsyncTask.
There are a situation when I receive the same HTML from the service.
The HTML:
<html>
<head>
</head>
<body style="font-family:Arial;">
<center>No data to display</center>
</body>
</html>
The strange behavior:
At every odd call (1, 3, 5, ...) the HTML above is centered, every even call the same HTML that aligned to left.
It happens only on Samsung Galaxy 2 and 3 with Android 4 and not happens on Motorola Atrix with Android 2.3.4.
I load the HTML with:
mReportChart.loadDataWithBaseURL("fake://", data.getHtml(), "text/html", "utf-8", "fake://");
The HTML each time is the same.
How can I resolve that problem?
Ben is right, the center tag is not standard HTML5, so you can't expect it to work properly. The best solution, if you can, is getting rid of the center tag. But if that's not the case you can just "force" the center tag to be centered with css. Add the following to your stylesheet and it should be fixed:
center {
margin-left:auto;
margin-right:auto;
text-align:center;
}
The center tag is deprecated in HTML 4.01 and not supported in HTML 5. I would use CSS to center what you want out.
http://www.w3schools.com/tags/
<div style="text-align: center;">
No data to display
</div>
I have a very unusual bug that appears on my Android 4.0 on Galaxy Note. Some friends see the same on their Galaxy S3. I simplified my code to the following:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#movieplayer {width:100%; position:fixed; top:0px; left:0px; right:0px; bottom:0; background:yellow; z-index: 90;}
.player, .project-info {width:100%}
#movieplayer .short-info {width:100%;background:green;display:block;position:relative;}
</style>
</head>
<body class="works">
<div id="global-container">
<div id="movieplayer">
<div class="player">
<div class="project-info movie">
<div class="short-info jspScrollable">
<div class="container">
hello
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When you first load up this page in PORTRAIT, you should see a green bar on top of a yellow background. They both fill the screen width 100%. When you rotate the phone to landscape, the yellow continues to fill the rest of the screen, but the green bar fails to fill the remaining width. Why is this?
I am using #movieplayer{position:fixed;} here because in my real code, I rely on that to do some other stuff. So I can't use position:absolute.
This issue seems like a bug in certain versions of the android browser.
The set of elements under the fixed-position container aren't asked to recalculate their width (during reflow) as a result of the resize event.
Your solution works, as it is one of several ways to force this recalculation to occur.
Oddly enough, we've found that any landscape-specific media query in css fixes it for us.
(tested on Galaxy S3):
#media screen and (orientation: landscape){
.doesnt-exist { background:red; }
}
Related links :
Android Issue 27959
Android Issue (dup) 25610
OK, I was able to hack a solution together. I have jquery installed, and then I did a
$('.short-info').css('position','absolute');
setTimeout("$('.short-info').css('position','');", 0);
This is ugly, but it works.
I'm developing application for android. my application has very big size (APKfile) that is because of some high quality images. I decided to move it into server and in app, just load the webpage and show it in through webpage. Each HTML page has just one image (without text and other items) and all images have 450 pixels width while height may be different for each image. When i load the web page, image is not fit to screen and is bigger than my screen. I need to have image fit to screen.
I know i can load just image from server but when i did it the aspect ratio was not fine and image squashed. its width stretched while the height didn't take effect. The code that i used was android:scaleType="fitXY"
because of some reasons I don't want change the code totally and i prefer to find a way to apply changes to html file. My html file is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Team Championship</title>
</head>
<body>
<img align="left" alt="Team Championship" src="../image/team_championship.png"/>
</body>
</html>
please tell me, how it is possible to have image fit to screen in all devices?
sorry, although i'm not bad in Android programming, I'm not familiar with web programming.
Thanks
Thanks guys,
but easier and fastest way is changing above image code to this:
<img align="left" alt="Abudhabi" src="../image/track_abudhabi.png" width="100%"/>
now in all devices the image is fit to screen.
I was working on a mobile website. The test devices were an iPod Touch, and two Android phones. No issues with the iPod Touch, but the Android phones insisted on making the image be the full size. So you could only ever see about 25% of the image. I searched on "fit web page with graphic to device" and it lead me here.
The adding of width="100%" worked exactly as I needed for my issue. Simple! Thanks.
If you know the dimensions of your image, you can set the scale for your web view, e.g.:
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int imgWidth = ...;
int imgHeight = ...;
if(imgWidth > displayMetrics.widthPixels) {
int scaleInPercent = 100 * displayMetrics.widthPixels / imgWidth;
m_webView.setInitialScale(scaleInPercent);
}
Just add the check for the height and you should be good to go.
If you are using a WebView, the best and simplest way is to add a style tag inside the head tag:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
img{
max-width:100%;
height:auto;
display:block;
margin-left:auto;
margin-right:auto;
}
</style>
<title>Team Championship</title>
</head>
<body>
<img align="left" alt="Team Championship" src="../image/team_championship.png"/>
</body>
</html>
Like this, ALL THE IMAGES are fit and centered.