Css 响应性设计-奇怪的行为

谁能看看这个吗 ?

不是我写的，但我想不出这种反应性行为。。。当我使用codepen或F12缩小屏幕尺寸时，它可以工作，但当我在手机上打开它或在800px以下的检查模式设备中打开它时，它不会显示在单行中。。。有没有办法解决这个问题

这是编写的响应性代码

@media only screen and (max-width: 830px) {
    #conference-timeline .timeline-start,
    #conference-timeline .timeline-end {
        margin: 0;
    }
    #conference-timeline .conference-center-line {
        margin-left: 0;
        left: 50px;
    }
    .timeline-article .meta-date {
        margin-left: 0;
        left: 20px;
    }
    .timeline-article .content-left-container,
    .timeline-article .content-right-container {
        max-width: 100%;
        width: auto;
        float: none;
        margin-left: 110px;
        min-height: 53px;
    }
    .timeline-article .content-left-container {
        margin-bottom: 20px;
    }
    .timeline-article .content-left,
    .timeline-article .content-right {
        padding: 10px 25px;
        min-height: 65px;
    }
    .timeline-article .content-left:before {
        content: "\f0d9";
        right: auto;
        left: -8px;
    }
    .timeline-article .content-right:before {
        display: none;
    }
}

这是一个代码笔问题。嗯，这不是一个真正的问题，但与它在编辑器模式下的工作方式有关

在手机上，codepen不接受媒体查询，因为它开始显示其桌面版本。我想这是为了让您仍然可以编辑html、css和JavaScript

但是，如果切换到整页模式，则可以查看已编辑设计的响应：

另外，请注意两件事：

添加元视口标记

响应垂直时间线 开始 当我乘坐宇宙飞船环绕地球运行时，我第一次看到我们的星球是多么美丽。人类，让我们保存和增加这种美，而不是破坏它！01

无名氏 当我乘坐宇宙飞船环绕地球运行时，我第一次看到我们的星球是多么美丽。02

无名氏 18 四月 当我乘坐宇宙飞船环绕地球运行时，我第一次看到我们的星球是多么美丽。人类，让我们保存和增加这种美，而不是破坏它！01

无名氏 当我乘坐宇宙飞船环绕地球运行时，我第一次看到我们的星球是多么美丽。02

无名氏 18 四月 当我乘坐宇宙飞船环绕地球运行时，我第一次看到我们的星球是多么美丽。人类，让我们保存和增加这种美，而不是破坏它！01

无名氏 当我乘坐宇宙飞船环绕地球运行时，我第一次看到我们的星球是多么美丽。02

无名氏 18 四月 终止

---

我已经复制粘贴到我的本地机器，并有相同的问题。。。它没有响应请确保添加元视口标记并使用与代码笔相同的css重置。我在上面添加了一个代码片段，以便您可以在工作时看到它。另外，请注意，使其具有响应性的主要因素是将左侧和右侧容器上的浮动更改为无。是的，您是对的，我一添加meta标记，它就工作了，完全忘记了这一点

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet">