移动设备正在显示 "miniature" 的桌面内容布局，而不是根据其宽度进行相应调整

Question

此问题与我几分钟前发布的另一个问题的同一个项目有关，也许更容易解决。

当我在 Chrome 控制台中单击移动图标时，而不是使用它正在模拟的移动设备的实际大小（在本例中为 iPhone 10，宽度为 375 像素），它显示微小的内容，就好像我在一个小的移动屏幕上看桌面布局一样。

这里是我屏幕上的几张图片，以使其更加清晰。请注意，移动视图只是桌面视图的缩影，而我希望它使布局适应较小的宽度。

但是，如果我只是单击移动图标，我只是将控制台 window 拖到左侧并手动挤压视口，它将按预期工作并正确地重新分配内容。参见：

这是我的 HTML 和 CSS 代码：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="OEPanel.css">
    </head>

    <body>
        <div id="oepanel" class="OEContainer" >
            <div id="oecell11" class="OECell">
                cell 1
            </div>
            <div id="oecell12" class="OECell">
                cell 2
            </div>
            <div id="oecell13" class="OECell">
                cell 3
            </div>
    </div>
    </body>
</html>

.OEContainer {
    background-color: lightblue;
    border: 3px solid #000000;
    min-height: 10em;
    vertical-align: middle;
    padding: 10px;
    max-width:1130px;
    margin:auto;
    text-align:center;
    justify-content:space-between;
}
  
.OECell {
    background-color: lightblue;
    border: 3px solid #73AD21;
    min-height: 10em;
    vertical-align: middle;
    padding: 0px;
    width:250px;
    text-align:center;
    float: left;
    margin: 5px;
}

我在这里错过了什么？

Answer 1

艳！

我认为你的代码遗漏了一些东西，这里有一个使用 Flexbox 来制作你正在寻找的东西的例子。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <div id="oepanel" class="OEContainer" >
        <div id="oecell11" class="OECell">
            cell 1
        </div>
        <div id="oecell12" class="OECell">
            cell 2
        </div>
        <div id="oecell13" class="OECell">
            cell 3
        </div>
</div>
</body>
</html>

在您的代码的 Head 部分缺少一些元标记，这些标记对于代码的兼容性和正确响应很重要。

CSS:

.OEContainer {
    background-color: lightblue;
    border: 3px solid #000000;
    min-height: 10em;
    vertical-align: middle;
    padding: 10px;
    max-width:1130px;
    margin:auto;
    text-align:center;
    display: flex;
    justify-content:space-between;
}
  
.OECell {
    background-color: lightblue;
    border: 3px solid #73AD21;
    min-height: 10em;
    vertical-align: middle;
    padding: 0px;
    width:250px;
    text-align:center;
    float: left;
    margin: 5px;
}

@media (max-width: 500px) {
    .OEContainer {
        flex-direction: column;
        align-items: center;
    }
}

并且在 CSS 中，我使用 flexbox 通过媒体查询使其响应。刚刚在主要 .OEContainer 中添加了一个 display: flex;，在移动设备的媒体查询中，我将 flex-direction 更改为 column。

我只是一个编码初学者，但希望这对你有所帮助。

移动设备正在显示 "miniature" 的桌面内容布局，而不是根据其宽度进行相应调整

Mobile is displaying "miniature" of desktop content layout instead to adjust accordingly to its width

css

mobile

viewport