Question

我几乎完成了为客户完成这个网站的建设，但每次我在移动设备上查看车队页面时，它会破坏图片堆栈而不是内联。任何人都可以帮助我。

查看我在手机上访问www.bayareasedans.com的信息，点击车队页面或http://mobiletest.me/htc_one_emulator/#u=http://www.bayareasedans.com，然后点击车队页面。

<div style="width: 960px;" class="fleet">
        <table>
            <tr>
                <th>Mercedes Benz S550</th>
                <th>Chevy Suburban SUV</th>
                </tr>
            <tr>
                <td><img src="pics/merc550small.jpg"/></td>
                <td><img src="pics/suburbansmall.png"/></td>
                </tr>
            <tr>
                <th>Lincoln Town Car Sedan</th>
                <th>Lincoln Town Car Stretch</th>
                </tr>
            <tr>
                <td><img src="pics/towncar_blacksmall.jpg"/></td>
                <td><img src="pics/limo_blacksmall.jpg"/></td>
            </tr>
        </table>
    </div>

table {
margin: 25px auto;
}

.fleet th {
font-family: 'oxygenregular';
text-align: center;
text-transform: uppercase;
}

.fleet img{
width: 473px;
height: 264px;
}

您可以在https://github.com/salehkaddoura/MetroSedans

查看完整的网站代码

Answer 1

您似乎没有在CSS中使用任何 media queries 来更改移动设备查看网页时的布局。您有适当的<meta name="Viewport">标记，但没有别的。这会影响整个网站，而不仅仅是Fleets页面。

在相关的说明中，通过将基本CSS放在多个样式表中，每次有人访问您的站点时，您都会在服务器上添加页面加载时间和负载。您可以通过将它们编译成单个样式表来避免这种情况。

移动设备会在我的网站上缩小页面

1 个答案: