html - 移动设备扭曲了我网站上的页面

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

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

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