处理网络应用程序的屏幕密度

发布于 2024-12-24 18:20:48 字数 1490 浏览 3 评论 0原文

我编写了一个非常简单的 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" />

在中，< ;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() 函数是另一段 javascript，它调用 Android 应用程序并检索“绝对”屏幕尺寸（以像素为单位）。

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

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

所以问题是 - 我在请求图像源时被迫指定尺寸 - 我应该如何正确翻译内容？有没有人有类似的经历可以分享一下？

我已经多次阅读从网络应用程序定位屏幕，我清楚地知道缺少一些东西。

原文

I've written a very simple Android app which basically presents a full screen WebView (no title bar, notification bar or URL bar) in landscape.

The Activity then basically loads a client.html file from the user's PC which then loads a fixed image meant to fill the whole of the screen. The client.html file has a meta element as follows...

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

In the <html><body> the <img> src attribute is set by requesting the image at a specific size as follows...

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

...and this is the javascript setImageSource()...

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

The getDimensions() function is another piece of javascript which calls into the Android app and retrieves the 'absolute' screen dimensions in pixels.

So here's my problem (and I know using absolute pixels is probably the root of it)....

On my Desire, it's classed as hdpi for web apps and has 800x480 actual pixels. The call to set the image source looks like..."/control?size=800x480" and works perfectly. The image fits my full screen. One tester, however, has a 7in tablet - also 800x480 but due to screen size it's classed as mdpi. Requesting the same sized image with "/control?size=800x480" and the fact the <meta> tag forces mdpi obviously means the image is oversized.

So the question - I'm forced to specify dimensions when requesting the image source - how am I supposed to translate things properly? Has anyone a similar experience they can share?

I've read Targeting Screens from Web Apps several times over and I'm clearly missing something.

分享到QQ

分享到微博