相同的图片，但在同一智能手机上的分辨率不同

Question

我在为Android开发的应用程序中解决图像问题。在页面上用几句话就很难看到图像，在另一个页面上你可以看得很清楚。两个图像的css和html是相同的，因此我无法解释它是如何可能的。我附上图片以帮助您理解，截图来自三星Galaxy s3！

这是元：

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

编辑： 我注意到在data-role =“content”里面有一个“ul”时会出现问题。我试图从页面中删除“ul”，其中图像的分辨率很差，实际上问题就消失了......

代码清单：

 var link_markup ='<li id="list1"><a onclick="rowSelectedCardio()" href="#" class="ui-link-inherit"><p style="white-space: normal">'+stringCardio+'</p></a><span><img src="img/'+color+'"></span></li>';

$(link_markup).appendTo('#listaCardio');

和css：

 .scrollable {

   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
  }

.classListCardio li {
    background:#9D9D9C;
    max-height:45px;
    height:45px;
    margin-bottom:0px !important;
    padding:0px !important;
    border-bottom-width:1px;
    border-bottom-style:solid;
    }

.classListCardio img {
margin-top:17px !important;
height:11px !important;
width:7px !important;
}

.classListCardio li a {
height:35px !important;
width:95% !important;
float:left;
}

Answer 1

您是否尝试删除 target-densityDpi ..现在已弃用该文件并将其从webkit中移除：

http://trac.webkit.org/changeset/119527

所以请尝试以下任何一项..这只是声明目标密度：

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

并且没有目标密度：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

或者这个：

<meta name="viewport" content="width=device-width,initial-scale=1">

因为 target-densityDpi 已被删除..请尝试以上任何一个视口元标记

Answer 2

已解决：

问题是由赋予图像的z-index属性提供的，

删除z-index，问题消失了