移动浏览器的渲染方式可能与缩小的PC浏览器不同？

Question

目标：
在移动设备上设置聊天界面的风格。

问题：
我把聊天机器人的概念证明放在了一起。一切都很简单，包括JS＆amp; CSS。虽然我也有a separate issue with JS (i think)，但这是我的CSS问题。

在开发过程中，我在FF＆amp; amp; Chrome，缩小浏览器以模拟移动浏览器体验 所有CSS媒体查询都按预期执行。

然而......在我们测试的任何移动设备上，CSS媒体查询中指定的大小调整都无效，我们无需放大。

示例：
temp.mosaranch.com/chatbot-tester

问题：
什么可能导致移动浏览器 不 呈现特定的媒体查询CSS规则，而在缩放时应用规则 在桌面浏览器上？

Answer 1

您需要一个视口元标记，以便媒体查询在移动设备上正常运行。

在MDN阅读更多内容：
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

  

典型的移动优化网站包含以下内容：
  <meta name="viewport" content="width=device-width, initial-scale=1">