Html 移动响应瓷砖

我有一些html/css，它在屏幕上运行良好，但在实际的手机/平板电脑上运行不正常

在手机上，我的瓷砖最小宽度似乎不受尊重。我是否可以做些不同的事情来获得相同的效果

小提琴：

html:

---

您应该添加元标记，例如：

 <meta name="viewport" content="width=device-width, user-scalable=yes" />

将以下id添加到HTML中

然后把这个JS放在页面的底部

我在resize函数的外侧全局定义了vars tile。这样，VAR的设置只执行一次，而不是每次调整屏幕大小或旋转移动屏幕时。可以使用for循环来减少代码的大小。由于循环开销，这将运行得稍慢，并且不会减少实际执行的机器代码大小，这也是由于循环开销

参考：

用户/信源编码规则1第15-6页， 用户/信源编码规则1第3-9页， 用户/信源编码规则2,3,4,5第3-39页， 用户/信源编码规则18第8-13页， 用户/信源编码规则31第8-22页 用户/信源编码规则10,11第3-59页

---

看起来将图像移动到div背景中不会显示任何内容。我错过了什么吗：高度是零。必须指定高度。您可能需要javaScript来实现这一点。我将编写JS并进行测试，您可以看到我正在处理的问题。在桌面chrome中，原始的html/css是一个响应网格，它可以根据屏幕大小进行缩放，并随着屏幕的缩小而缩小。随着iphone的尺寸缩小到一张图片宽。在真正的手机/ipad上。我不知道你为什么要最少255px的瓷砖。为什么不让它缩小到以前的规模呢。我将进行一些更改，并使用可调整大小的响应设计查看器对其进行测试。指定像素最小宽度的原因是为您提供一些断点。在IPad上，每行有三块瓷砖。在iPhone上，您只有一个。可能是

.homepageTiles .tile {
margin: .3%;
float: left;
width: 24.4%;
min-width: 225px;
position: relative;
overflow: hidden;
}

.homepageTiles .tileImage {
width: 100%;
}

.homepageTiles .caption {
float: left;
position: absolute;
height: 225px;
width: 100%;
background: url(/images/HomepageTiles/TileBackground.png);
left: 0;
top: -225px;
text-align: center;
}

.homepageTiles .caption .captionLinks {
margin-left: 25px;
margin-right: 25px;
margin-top: 75px;
padding-bottom: 5px;
border-top: 1px solid #959799;
border-bottom: 1px solid #959799;
}

.homepageTiles .caption .captionLinks a {
display: block;
margin-top: 5px;
font-size: 17px;
color: #ffffff;
}

 <meta name="viewport" content="width=device-width, user-scalable=yes" />

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

<div id="size" class="tile">
<img id="tile1"  src="http://www.cpower.com/images/HomepageTiles/EngineTile.png" class="tileImage">
<img id="tile2" src="http://www.cpower.com/images/HomepageTiles/TransmissionTile.png" class="tileImage">
<img id="tile3" src="http://www.cpower.com/images/HomepageTiles/GeneratorsTile.png" class="tileImage">
<img id="tile4" src="http://www.cpower.com/images/HomepageTiles/CareersTile.png" class="tileImage">

<script type="text/javascript">
//<![CDATA[
var tile = new Array;
tile[0] = document.getElementById('size');
tile[1] = document.getElementById('tile1');
tile[2] = document.getElementById('tile2');
tile[3] = document.getElementById('tile3');
tile[4] = document.getElementById('tile4');
function resize(){
  var w = tile[0].offsetWidth ;
  if (w < 255){w=225;}
  tile[1].style.width= w+'px';
  tile[1].style.height= w+'px';
  tile[2].style.width= w+'px';
  tile[2].style.height= w+'px';
  tile[3].style.width= w+'px';
  tile[3].style.height= w+'px';
  tile[4].style.width= w+'px';
  tile[4].style.height= w+'px';
}
window.onload = resize;
window.onresize = resize;
//]]>
</script></body></html>