响应式 - 所有元素在移动设备上都太小了答案

【问题标题】：Responsive - All elements are way too small on mobile devices响应式 - 所有元素在移动设备上都太小了
【发布时间】：2022-02-13 22:08:13
【问题描述】：

我正在开发一个网站，但我对移动设备上的视图有一个奇怪的问题。当我在桌面浏览器上调整窗口大小时，元素和字体会随着视口的变化而变化。当我在移动设备上打开网站时，所有字体和元素（例如汉堡菜单）都很小。看起来这是一个扩展问题或类似问题。我在头部有元视口标签，所以这不是问题。

我在这里或任何其他论坛上都找不到任何类似的问题。我希望有人能帮忙。我附上了一些截图，但如有必要，我可以提供 URL。提前谢谢你。

Full Screen Window
Resized Window
Responsive example 1
Resposive example 2

【问题讨论】：

请提供网址
您是使用百分比还是 em 来设置字体大小？
@josh 我用 em 来设置字体大小
使用em 作为度量单位的一个有趣之处在于它与父元素相关。所以，如果你有几个嵌套的 HTML 元素（div、span 等）都使用em，它们的字体大小都基于它们的父元素，这可能导致一些不可预知的结果，这些结果只体现在移动布局。您可以尝试使用rem 作为度量单位，因为它始终与html 的根字体大小相关。
我会试一试，但这并不能解释为什么汉堡菜单的大小也错误。这是网址：clmsftsw.com

标签： html css mobile responsive meta-tags

【解决方案1】：

确保包含响应式元标记，以确保您的浏览器获得设备的正确宽度，而不是缩小页面

<meta name="viewport" content="width=device-width, initial-scale=1">
这意味着浏览器将（可能）呈现页面在其自身屏幕的宽度。所以如果那个屏幕是 320px 宽，浏览器窗口将是 320px 宽，而不是缩小和显示 960 像素（或该设备默认执行的任何操作，而不是响应式元标记）。