Question

我正在努力为移动标准容纳一个非常古老的网站，并且出于某种原因，当我激活chrome dev工具中的响应式视图时，它不会获得宽度为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

如果您需要查看移动设备的更多内容并且媒体查询无效，请检查头部的元标记

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

Answer 2

如果您在PC上查看，请从device和min-device-width删除max-device-width一词。

此外，请务必使用元视口标记：

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

Answer 3

您必须使用元视口和CSS。通过实例这样的事情：

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

Answer 4

页面上的某些元素可能具有固定宽度，不允许页面根据需要调整大小。你需要浏览元素并找到它。我在几个网站上遇到过这个问题。

为什么页面的宽度不会根据视口减小？

4 个答案: