移动浏览器呈现与缩小版 PC 浏览器不同的可能原因？
Possible causes for mobile browser to render differently than a scaled-down PC browser?
目标：
风格化移动设备上的聊天界面。
问题：
我已经为聊天机器人拼凑了一个概念验证。一切都很简单，包括 JS & CSS。虽然我也有 a separate issue with JS (i think)，但这是我的 CSS 问题。
在开发过程中，我在 FF 和 Chrome 中进行了测试，并缩小了浏览器以模拟移动浏览器的体验。
所有 CSS 媒体查询都按预期运行。
然而...在我们测试的任何移动设备上，CSS 媒体查询中指定的大小没有任何效果，我们不得不放大。
示例：
temp.mosaranch.com/chatbot-tester
问题：
是什么导致移动浏览器 不 呈现特定媒体查询 CSS 规则，而规则 在桌面浏览器上缩小时应用吗？
您需要视口元标记才能使媒体查询在移动设备上正常运行。
在 MDN 上阅读更多内容：
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
目标：
风格化移动设备上的聊天界面。
问题：
我已经为聊天机器人拼凑了一个概念验证。一切都很简单，包括 JS & CSS。虽然我也有 a separate issue with JS (i think)，但这是我的 CSS 问题。
在开发过程中，我在 FF 和 Chrome 中进行了测试，并缩小了浏览器以模拟移动浏览器的体验。
所有 CSS 媒体查询都按预期运行。
然而...在我们测试的任何移动设备上，CSS 媒体查询中指定的大小没有任何效果，我们不得不放大。
示例：
temp.mosaranch.com/chatbot-tester
问题：
是什么导致移动浏览器 不 呈现特定媒体查询 CSS 规则，而规则 在桌面浏览器上缩小时应用吗？
您需要视口元标记才能使媒体查询在移动设备上正常运行。
在 MDN 上阅读更多内容：
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1">