When i try to load the below html page in android browser, the image is not re-sizing according to resolution
<html>
<header>
<meta name="viewport"
content="width=device-width,initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
<link rel="stylesheet" href="file:///android_asset/style.css"
type="text/css">
</header>
<body>
<p>This is a sample.</p>
<br />
<p>This is a sample. this is a sample to test text alignment This is a sample. this is a sample to test text alignment This is a sample. this is a sample to test text alignment This is a sample. this is a sample to test text alignment This is a sample. this is a sample to test text alignment This is a sample. this is a sample to test text alignment This is a sample. this is a sample to test text alignment This is a sample. this is a sample to test text alignment This is a sample. this is a sample to test text alignment This is a sample. this is a sample to test text alignment This is a sample. this is a sample to test text alignment This is a sample. this is a sample to test text alignment </p>
<br />
<img align="center" class="centeraligned"
src="file:///mnt/sdcard/Android/data/com.sample.sample/sample.jpg"
height="600" width="630" />
<br />
</body>
</html>
If i set viewport content width=600 images looks fine. but text aligns to left. Am i missing any settings in viewport?
P.S: Text alignment issue occurs only in Kindle Fire HD and Kindle Fire Classic.
I usually make the image fill the 100% width. So no matter what the device width height is. Something like below will do
<img src="file:///mnt/sdcard/Android/data/com.sample.sample/sample.jpg" style="width:100%">
Else get the width, height dynamically and alter the image on run time
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document