html - 为什么页面的宽度不会根据视口(viewport)减小？

Question

我正在尝试让一个非常非常古老的网站适应移动标准，但出于某种原因，当我在 chrome 开发工具中激活响应式 View 时，它的宽度不是 320 或任何像素宽度。这样做的结果使像素变小，同时仍保持原来的 900 像素宽度(在原始 pc 版本中，这是网站构建所依据的固定大小)

这将是我的媒体查询 CSS:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    body * {
        width: auto;
    }

    #container,
    #header,
    #nav,
    #container #wrapper,
    #content,
    #sidebar,
    #wrapper-bottom,
    #footer,
    #footer-inner,
    #footer-content
    {
        width: auto;
        height: auto;
        float: none;
    }

    /* Header
    -------------------------------------------------------------------*/   

    #header h1{
        display: block;

        text-align: center;
    }

    #header #search{
        position: static;
        display: block;
    }


    /* Navigation
    -------------------------------------------------------------------*/

    #nav ul{
        position: static;
    }



}

Answer 1

如果您需要更多正在查看移动设备并且媒体查询不起作用，那么请检查 head 中的元标记

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