Question

当我尝试在Android浏览器中加载以下html页面时，图像不会根据分辨率重新调整大小

<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>

如果我设置视口内容宽度= 600图像看起来很好。但文字对齐左边。我在视口中缺少任何设置吗？

P.S：仅在Kindle Fire HD和Kindle Fire Classic中出现文本对齐问题。

Answer 1

我通常会将图像填充为100％宽度。所以无论设备宽度高度是多少。像下面的东西会做

<img src="file:///mnt/sdcard/Android/data/com.sample.sample/sample.jpg" style="width:100%">

否则动态获取宽度，高度并在运行时改变图像

$(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

Answer 2

height =“600”width =“630”您已设置此常量像素，因此图像永远不会调整大小。你可以添加javascript来调整图像大小。

Answer 3

出于某些目的，this below answer by Sheharyar Naseer会有所帮助：

webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

如何根据不同的分辨率调整android webview中的图像大小？

3 个答案: