移动浏览器呈现与缩小的 PC 浏览器不同的可能原因？答案

【问题标题】：Possible causes for mobile browser to render differently than a scaled-down PC browser?移动浏览器呈现与缩小的 PC 浏览器不同的可能原因？
【发布时间】：2017-09-26 19:59:11
【问题描述】：

目标：
设计移动设备上的聊天界面。

问题：
我整理了一个聊天机器人的概念验证。一切都很简单，包括 JS & CSS。虽然我也有a separate issue with JS (i think)，但这是我的 CSS 问题。

在开发过程中，我在 FF 和 Chrome 中进行了测试，并缩小了浏览器以模拟移动浏览器体验。
所有 CSS 媒体查询都按预期运行。

然而...在我们测试的任何移动设备上，CSS 媒体查询中指定的大小都没有效果，我们不得不放大。

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

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

【问题讨论】：

我们在这里讨论的是什么浏览器？例如，iOS 上的 Safari（对我们来说很不幸）必然会与桌面上的 chrome 略有不同

标签： css media-queries mobile-browser

【解决方案1】：

您需要一个视口元标记才能使媒体查询在移动设备上正常工作。

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

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

【讨论】：

宾果游戏！就是这样。