我有一些html / css在screenfly上运行良好但在实际手机/平板电脑上行为不端。
看起来在手机上，瓷砖的最小宽度并未得到尊重。有什么我可以采取不同的方式来达到同样的效果吗？
小提琴：http://jsfiddle.net/a9747a6a/
HTML：
<div class="homepageTiles">
<!-- Row 1 -->
<div class="tile">
<img src="/images/HomepageTiles/EngineTile.png" class="tileImage">
<div class="caption" style="top: -255px;">
<div class="captionLinks">
<a href="/engines/onHighway.aspx">ON HIGHWAY</a>
<a href="/engines/offHighway.aspx">OFF HIGHWAY</a>
</div>
</div>
</div>
<div class="tile">
<img src="/images/HomepageTiles/TransmissionTile.png" class="tileImage">
<div class="caption" style="top: -255px;">
<div class="captionLinks">
<a href="/transmissions/onHighway.aspx">ON HIGHWAY</a>
<a href="/transmissions/offHighway.aspx">OFF HIGHWAY</a>
<a href="/transmissions/remanufactured.aspx">REMANUFACTURED</a>
</div>
</div>
</div>
<div class="tile">
<img src="/images/HomepageTiles/GeneratorsTile.png" class="tileImage">
<div class="caption" style="top: -255px;">
<div class="captionLinks">
<a href="/generators/ingersollRand.aspx">DOOSAN</a>
<a href="/generators/mtuOnSiteEnergy.aspx">MTU ONSITE ENERGY</a>
<a href="/generators/packagedGensets.aspx">PACKAGED GENSETS</a>
<a href="/generators/preventitiveMaintenance.aspx">PM PROGRAMS</a>
<a href="/generators/switchGearAts.aspx">SWITCH GEAR ATS</a>
</div>
</div>
</div>
<div class="tile">
<a href="/companyInfo/careers.aspx">
<img src="/images/HomepageTiles/CareersTile.png" class="tileImage">
</a>
</div>
</div>
CSS：
.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;
}
答案 0 :(得分：0)
您应该添加元标记，例如：
<meta name="viewport" content="width=device-width, user-scalable=yes" />
如果不希望使用JS解决方案，您可以使用CSS媒体查询为每种类型的设备使用CSS，例如：
/* 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 */
}
将以下ID添加到您的HTML
<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">
然后在</body>
<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>
我在resize函数的全局范围内定义了vars tile。这样设置vars只进行一次，而不是每次调整屏幕大小或旋转移动屏幕。可以使用for循环来减小代码的大小。由于循环开销，这会运行得慢一点，并且不会减少实际执行的机器代码大小，这也是由于循环开销。
参考：
Intel Architectures Optimization Reference