导致移动浏览器呈现与缩小的PC浏览器不同的可能原因? [英] Possible causes for mobile browser to render differently than a scaled-down PC browser?

问题描述

目标:
风格化移动设备上的聊天界面.

GOAL:
Stylize a chat-interface on mobile devices.

问题:
我已经为聊天机器人拼凑了概念验证.一切都很简单，包括JS& CSS.虽然我还有一个单独的JS问题(我认为)，但这是我的CSS问题.

PROBLEM:
I've thrown together a proof-of-concept for a chatbot. Everything is very simple, including the JS & CSS. While I'm also having a separate issue with JS (i think), this here is my CSS problem.

在开发过程中，我在FF& Chrome浏览器，并按比例缩小浏览器以模拟移动浏览器的体验.
所有CSS媒体查询的行为均符合预期.

While developing, I tested in FF & Chrome, and scaled down the browsers to emulate the mobile-browser experience.
All the CSS media queries acted as expected.

但是...在我们测试的任何移动设备上，CSS媒体查询中指定的大小均无效，我们不得不放大.

Yet ...on any mobile device we test, the sizing specified in CSS media queries has no effect and we are left having to zoom in.

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

EXAMPLE:
temp.mosaranch.com/chatbot-tester

问题:
是什么导致移动浏览器 不 呈现特定的媒体查询CSS规则，而在缩放时应用 规则在台式机浏览器上?

QUESTION:
What could cause mobile browsers to not render specific media-query CSS rules, while the rules are applied when scaling down on a desktop browser?

推荐答案

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

You need a viewport meta tag in order for media queries to work properly on mobile devices.

在MDN上了解更多信息:
https://developer .mozilla.org/zh-CN/docs/Mozilla/Mobile/Viewport_meta_tag

Read more at MDN:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

典型的针对移动设备进行优化的网站包含以下内容:
<meta name="viewport" content="width=device-width, initial-scale=1">

A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1">

这篇关于导致移动浏览器呈现与缩小的PC浏览器不同的可能原因?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！