javascript - 移动应用程序中的图像渲染

Question

我目前正在开发 Android 移动应用程序，并且遇到了尺寸较小的 Android 移动设备的图像渲染问题。这些图像在 Nexus、三星等宽屏手机上看起来很整齐，但在小屏幕手机上图像会重叠。我正在使用 ionic 来构建我的代码，并且还包含了 Bootstrap 。

我在样式部分包含了以下代码:

@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

正文中的以下代码:

<div class="col-xs-12 col-md-12 col-sm-12" >
<div id="journey" class="col-xs-2">
                            <a href=" "> <img src="./images/launch 48.png" class="img_responsive" style="width:60px;height:70px;padding:5px;position: relative;left:1%;" cursor="pointer" onclick="" /></a>
</div>
<div id="conveyance" class="col-xs-2">
                            <a href="./4s.html "><img src="./images/launch 48.png" class="img_responsive"  style="width:60px;height:70px;padding:5px;" cursor="pointer" /></a>
</div>
<div id="per-diem" class="col-xs-2" >
                            <a href=" "> <img src="./images/launch 48.png" class="img_responsive"  style="width:60px;height:70px;padding:5px;"cursor="pointer" onclick="" /></a>
</div>
            <div id="lodging" class="col-xs-2" >
                            <a href=" "><img src="./images/launch 48.png" class="img_responsive" style="width:60px;height:70px; padding:5px;"cursor="pointer" onclick="" /></a>
</div>
            <div id="misc_1" class="col-xs-2" >
                            <a href=" "><img src="./images/launch 48.png" class="img_responsive" style="width:60px;height:70px; padding:5px;" cursor="pointer" onclick="" /></a>
</div>
            <div id="end_journey" class="col-xs-2">
                            <a href=" "> <img src="./images/launch 48.png" class="img_responsive" style="width:60px;height:70px;padding:5px;"cursor="pointer" onclick="" /></a>
</div>

Answer 1

使用dip代替Px

在 240 dpi 屏幕上，1 dp 等于 1.5 个物理像素。在定义应用程序的 UI 时，应始终使用 dp 单位，以确保 UI 在不同密度的屏幕上正确显示。

如何支持多屏幕:

<强>1。在 list 中明确声明您的应用程序支持哪些屏幕尺寸:

通过声明您的应用程序支持哪些屏幕尺寸，您可以确保只有具有您支持的屏幕的设备才能下载您的应用程序。声明对不同屏幕尺寸的支持还会影响系统在较大屏幕上绘制应用程序的方式，特别是您的应用程序是否在屏幕兼容模式下运行。 要声明您的应用程序支持的屏幕尺寸，您应该在 list 文件中包含该元素。

<强>2。为不同的屏幕尺寸提供不同的布局:

默认情况下，Android 会调整应用程序布局的大小以适合当前设备屏幕。在大多数情况下，这工作得很好。在其他情况下，您的 UI 可能看起来不太好，并且可能需要针对不同的屏幕尺寸进行调整。例如，在较大的屏幕上，您可能需要调整某些元素的位置和大小以利用额外的屏幕空间，或者在较小的屏幕上，您可能需要调整大小以使所有内容都能适合屏幕。 可用于提供特定于大小的资源的配置限定符有small、normal、large 和xlarge。例如，超大屏幕的布局应该放在layout-xlarge/中。 从 Android 3.2(API 级别 13)开始，上述尺寸组已被弃用，您应该使用 swdp 配置限定符来定义布局资源所需的最小可用宽度。例如，如果您的多 Pane 平板电脑布局需要至少 600dp 的屏幕宽度，则应将其放置在 layout-sw600dp/中。有关声明 Android 3.2 的平板电脑布局的部分将进一步讨论使用新技术声明布局资源。

<强>3。为不同的屏幕密度提供不同的位图可绘制对象: 默认情况下，Android 会缩放位图可绘制对象(.png、.jpg 和 .gif 文件)和九 block 可绘制对象(.9.png 文件)，以便它们在每个设备上以适当的物理尺寸呈现。例如，如果您的应用程序仅为基线、中等屏幕密度 (mdpi) 提供位图可绘制对象，则系统在高密度屏幕上时会放大它们，在低密度屏幕上时会缩小它们。这种缩放可能会导致位图中出现伪影。为了确保您的位图具有最佳外观，您应该针对不同的屏幕密度提供不同分辨率的替代版本。 可用于特定于密度的资源的配置限定符(详细描述如下)包括 ldpi(低)、mdpi(中)、hdpi(高)、xhdpi extra-high(xhdpi 超高)、xxhdpi(extra-extra-high)和xxxhdpi(额外额外额外高)。例如，高密度屏幕的位图应该放在drawable-hdpi/中。

请引用 http://developer.android.com/guide/practices/screens_support.html

如果您想了解更多信息，请参阅: What is the difference between "px", "dp", "dip" and "sp" on Android?