媒体查询表现得很奇怪

Question

我正在使用Dream weaver为我的网站创建一个关于我的响应页面（使用默认的关于我的模板）。当我使用Dream weaver设备预览系统时，该页面完全响应，并且在我的iPhone上它完全调整大小如下：

但是，当我将代码上传到网站时，页面不再响应。它看起来和我的笔记本电脑看起来一样（如下图所示）

为什么会出现这个问题？

html页面为this。如果您还需要我在这里发布代码，请告诉我。非常感谢您的帮助：）

Answer 1

要使媒体查询在小屏幕上工作，您需要在文档的头部包含视口元素。 E.g：

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