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.
Related
In my app webview, there's no problem to fit text html to screen on first load but the problem occurs when you try to load a page that contains a single large image as the first page after you start an activity.
If you try to load a page with single large image after you load any type of page after the activity started, the page with single large image will fit to the screen with no problem. But, if you try to load the page with single large image as the first page after the activity started, it will display a page with small image with lots of white space around it.
Is there any way to fit the page with single large image with one WebView#loadUrl method?
This is my html page with single large image source
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover Title</title>
</head>
<body>
<div id="cover">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1125 1600" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="1600" width="1125" xlink:href="../images/v01-cover.jpg" />
</svg>
</div>
</body>
</html>
I already tried setting the setLoadWithOverviewMode(true) and setUseWideViewPort(true) but didn't work out for me.
Read supermus comment in this link Android WebView, Scaling Image to fit the screen
If you are using a WebView, a meta tag with the viewport is expect (this way, it can calculate stuff like width with pixel values, even during load and failures). Add <meta name="viewport" content="width=device-width, initial-scale=1"> on the <head> of your document. This should fix some issues.
After reading Bonatti's answer, I managed to load a 'fit to screen' image page after the activity start by somehow forcing the webview to update viewport by calling this function when setting the webview
private void setWebView() {
mWebView = (WebView)findViewById(R.id.webview);
String data = "<html><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></head></html>";
mWebview.loadDataWithBaseURL(null, data, null, "UTF-8", null);
}
Cheers.
UPDATE
Instead of using #loadUrl, use #loadDataWithBase64 with your custom ContentProvider(to support local file) because you don't need to edit your html since #loadDataWithBase will fit the webview port to the screen straight away unlike #loadUrl which most probably have a small mistake in setting the viewport when loading a file/url
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.
It seems that every other mobile browser will scale images to the screen widths if you browse directly to the image (not to a page holding the image, but directly to the image), so long as the image is as wide or wider than the display resolution. Chrome on Android, however, scales the image much smaller to the upper-left corner of the screen. We've tested this on multiple devices all running the latest version of Chrome.
Since I can't seem to find any resolution to scale the images at that they would appear in Chrome as desired, does anyone have any methods to use a page to hold the image so that it would scale to the device width, no matter the OS or browser?
Thanks in advance,
Beems
I have raised a bug https://code.google.com/p/chromium/issues/detail?id=180239
A potential solution would be to create a webpage with the image in and the viewport set to the width of the image.
For example
<doctype html>
<html>
<head>
<style>* {margin: 0; padding: 0;}</style>
<meta name="viewport" content="width=[WIDTH OF IMAGE HERE]" />
</head>
<body>
<img src="[URL of IMAGE]" width="100%" />
</body>
</html>
See the sample I have here http://jsbin.com/ilequn/latest
Trying to load http://www.sciences-physiques.eu/appli/oneimage/ both in iOS and Android (SGS2).
Image is 1600*2262
The result is a better image on iOS. I know android can do better, because I had an application with such big image downsized, and the text was "clearer".
I red a lot about adding some code in css, but it seems that it does not apply to webkit
Here are the screenshots :
http://tof.canardpc.com/show/9144d047-0aaf-4906-9c96-1a991112f9fc.html
http://tof.canardpc.com/show/36008198-e6ef-4b02-820b-fe2ca8b8df1c.html
The code is :
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>carimage</title>
<style type="text/css">
img { width: 100%; }
html, body {
height: 100%;
background-color: #1985D0
}
</style>
<body>
<img src="1.png" />
</body>
</html>
The quality of images in iOS apps are better than those of android (having same resolution), image quality gets improved with the specified code but the time for loading increases. While doing android application development for my client I implemented the code and felt the difference in both quality and loading time.
I have a fixed-width web page (640 pixels wide). I would like this page to shrink to the width of a mobile device. However, if the device's native width is larger than 640 pixels, I do not want it stretched. Seems simple enough:
<meta name="viewport" content="width=640, maximum-scale=1.0" />
This works as expected in iPad/iPhone. However, on an Android tablet (ex. in landscape mode), the content gets scaled up to fit the display. In other words, Android is simply ignoring maximum-scale=1 . You can see an example page with the problem here. For the sake of completeness here is the source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Viewport</title>
<meta name="viewport" content="width=640, maximum-scale=1.0" />
<style>
div.bar {
position: absolute;
width: 636px;
height: 50px;
background-color: yellow;
border: 2px solid black;
left: 50%;
margin-left: -320px;
}
</style>
</head>
<body>
<div class="bar">
</div>
</body>
</html>
I've been doing a lot of researching and experimentation with the viewport meta-tag. I've read just about everything on the topic, but haven't seen this seemingly basic issue mentioned.
Two notes:
This is not a target-densitydpi issue
Setting the viewport width to device-width is not helpful in this case because the content width is fixed and larger than (for example) a phone's portrait device width. If I set width=device-width, the page will not automatically be scaled down to fit the phone..
Thanks much.
After more banging my head against a table, I have found a solution:
Unfortunately it seems that iOS and Android simply behave differently (Android is very clearly not doing what the spec says by ignoring maximum-scale). The solution is to specialize based on resolution using JavaScript:
If the screen width (see note below) is greater than or equal to the fixed page width (640 in my example), then set the viewport meta-tag's content width to the screen width
Else set the viewport meta-tag's content width to fixed page width (640)
Presto. Lame that it requires JavaScript specialization, but such is life.
Note that the Javascript screen.width on iPad/iPhone is incorrect if the device is landscape mode (the iPad still reports the portrait width instead of the landscape width, unlike Android which gets it right in this case!). Therefore, you'll need to check window.orientation on iPad/iPhone and use screen.height instead of screen.width if you are in landscape.
I'd rather use
width=640, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi
Instead of just the Max scale property...
The target-densityDpi property si Android specific, maybe it can fix your problem.