【发布时间】：2016-02-21 12:53:13
【问题描述】：
我目前正在开发一个 android 移动应用程序，但我遇到了尺寸较小的 android 移动设备的图像渲染问题。这些图像在 Nexus、三星等宽屏手机上看起来很整洁，但在小屏幕手机上图像重叠。我正在使用 ionic 来构建我的代码，并且还包含了引导程序。
我在样式部分包含以下代码：
@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>
【问题讨论】：
-
您能创建一个小提琴来复制这个问题吗？
-
您能帮我理解您所说的复制此问题的小提琴是什么意思吗？
-
jsfiddle.net - 重新创建您在该网站中遇到的问题，点击保存并在此处粘贴链接。
-
问题不在网络浏览器..在手机..屏幕宽度较小时图像重叠
-
请尝试创建一个类似@odedta 建议的小提琴，然后粘贴链接。使用 Web 浏览器的开发者工具，我们可以模拟较小的 android 设备屏幕的大小并尝试重新创建（并解决）问题
标签： javascript android html image ionic