响应式网站在移动设备上的外观与在瘦桌面窗口上的外观不同

Question

我正在制作一个响应式网站，并且一直在我计算机上的 Chrome 上对其进行测试。我可以调整它的大小，它会改变布局等，即使屏幕最薄也看起来非常好。

但是，我使用 Chrome 在手机上测试了该网站，但看起来不一样？

我已经添加了这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

到我的 HTML 的顶部。

出了什么问题？

编辑：

@media screen and (max-width: 475px) {

    #footer {
        height: 75px;
    }

    #left_footer,
    #right_footer {
        text-align: center;
        width: 100%;
    }

    #left_footer {
        bottom: 25px;
    }
}

Answer 1

那里的最大宽度值相当低：许多新的智能手机都有高分辨率屏幕。我通常在 720 像素或以下开始我的移动造型。