Question

我已经编写了一个非常简单的Android应用程序，它基本上呈现了全屏WebView（没有标题栏，通知栏或URL栏）。

然后，Activity基本上从用户的PC加载client.html文件，然后加载一个用于填满整个屏幕的固定图像。 client.html文件的meta元素如下......

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, height=device-height, initial-scale=1.0, user-scalable=no" />

在<html><body>中<img> src属性是通过请求特定尺寸的图片设置的，如下所示...

<div id="BasicDemo" >
    <img id="nscreen" />
</div>
<script type="text/javascript">setImageSource()</script>

...这是javascript setImageSource() ...

function setImageSource() {
    $.getScript("myscript.js", function() {
        $("#nscreen").attr("src", "/control?size=" + getDimensions());
    });
}

getDimensions()功能是调用Android应用并检索“绝对”的另一段javascript。屏幕尺寸，以像素为单位。

所以这就是我的问题（我知道使用绝对像素可能是它的根源）....

在我的欲望中，它被归类为网络应用的hdpi，并且具有800x480的实际像素。设置图像源的调用看起来像...... "/control?size=800x480"并且工作正常。图像适合我的全屏。然而，一位测试者拥有7英寸平板电脑 - 也是800x480，但由于屏幕尺寸，它被归类为mdpi。使用"/control?size=800x480"请求相同大小的图片以及<meta>标记强制mdpi这一事实显然意味着图片尺寸过大。

所以问题 - 我在申请图片来源时被迫指定尺寸 - 我该如何正确翻译？有没有人可以分享他们类似的经历？

我已多次阅读Targeting Screens from Web Apps，但我显然遗漏了一些东西。

Answer 1

尝试使用CSS媒体查询来定位LDPI，MDPI和HDPI： http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui

处理Web应用程序的屏幕密度

1 个答案: