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

我目前正在研究android移动应用程序，并且遇到了Android移动的图像渲染问题，它的尺寸较小。 Nexus，Samsung等手机的图像看起来很整齐，但屏幕较宽，但图像重叠在较小的屏幕手机上。我使用离子建立我的代码&也包括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>

来源

2015-11-19 Shalini

请您创建一个小提琴重复这个问题？ – odedta

你能帮我解释一下你的意思吗？ – Shalini

http://jsfiddle.net/ - 重新创建您在该网站的问题，点击保存并粘贴链接。 – odedta

使用浸代替Px的

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

如何支持多屏幕：

1.在屏幕尺寸您的应用程序清单中显式声明支持：

通过声明其屏幕尺寸应用程序支持，可以确保只有带有您支持的屏幕的设备可以下载您的应用程序。声明对不同屏幕尺寸的支持也会影响系统如何在更大的屏幕上绘制应用程序 - 具体而言，您的应用程序是否以屏幕兼容模式运行。要声明您的应用程序支持的屏幕大小，您应该将该元素包含在清单文件中。

2.针对不同屏幕尺寸提供不同的布局：

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

3.针对不同屏幕密度提供不同的位图资源： 默认情况下，Android的扩展您的位图资源文件（.png，.jpg和.gif文件）和九宫绘项目（.9.png文件）以便它们在每个设备上以适当的物理尺寸呈现。例如，如果您的应用程序仅为基准中间屏幕密度（mdpi）提供位图可绘制，则系统在高密度屏幕上缩放它们，并在低密度屏幕上缩小它们。这种缩放会导致位图中的伪像。为确保您的位图看起来最好，您应该为不同的屏幕密度提供不同分辨率的替代版本。您可以用于密度特定资源的配置限定符（详细描述如下）是ldpi（低），mdpi（中），hdpi（高），xhdpi超高），xxhdpi（超高），和xxxhdpi（额外超高）。例如，高密度屏幕的位图应该放在drawable-hdpi /中。

请参阅 http://developer.android.com/guide/practices/screens_support.html

如果您想了解更多然后参考： What is the difference between "px", "dp", "dip" and "sp" on Android?

来源

2015-11-23 10:38:58

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

回答

相关问题