Android - Strange Behavior html style max-width

Question

I want to show some html in a WebView. In that html code there is an image tag "img src" and a style within: style="max-width:300px;max-height:300px;". My Smartphone's display width is 480px. When I set the max-width style to 480px, the image don't fit to the display and is not complete visible. Around the WebView, there is no Margin or Padding. But when I set the max-width to 300px, the image fits perfectly. What is the reason of that? My display has a width of 480px und the image with that style 300px.

webView.loadData(newContent, "text/html; charset=UTF-8", null);

Html Code (newContent):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body bgcolor="white" leftmargin="0" topmargin="0">
<img src="http:...jpg" style="max-width:300px;max-height:300px;" />
<p>Text Text Text</p>
</body>
</html>

maybe this article will be of use to you css-tricks.com/snippets/css/media-queries-for-standard-devices — Carol McKay
There is a way to define height's und width's for different screen sizes. I will find a way, to set that size dynamically. The problem is, i can't use Metrcis because the size of my smartphone or WebView didn't display the images fit to the WebView width. — Gepro

Gepro Gepro · Accepted Answer · 2013-01-23T11:58:57

I have tested many ways and solve this problem by using percent. Now the image fits perfect to display if die image is large and keep it's width if it is smaller than the display.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body bgcolor="white" leftmargin="0" topmargin="0">
<img src="http:...jpg" style="max-width:100%;" />
<p>Text Text Text</p>
</body>
</html>

Android - Strange Behavior html style max-width

1 Answers