html - 在“缩放”状态下加载移动页面

Question

我在尝试使我的投资组合在移动设备上更具响应性时遇到了问题。正在发生的事情是在初始加载时页面以“放大”状态呈现。我可以缩小并按原样查看该站点。导航栏似乎占据了适当的宽度，但下面的所有元素都明显更宽，我找不到任何理由。

当前代码在https://codespent.dev上都是最新的，以供检查，所以我不会用代码混淆这个问题，我会在解决问题时添加相关代码。

我试过的：

尝试添加视口元数据以限制缩放并设置初始比例。

<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalabe=0;">

据我所知，已验证元素上没有静态宽度。

确认报告的设备宽度是准确的，但元素仍然突出宽度。

发现：

图表中的画布导致文档宽度与responsive: true;忽略高度和宽度的设置相冲突。

• 通过设置一个来解决此max-width: 250px问题，canvas以防止因设备宽度的误读而扩展。

溢出的打字机代码字符串导致宽度扩大。

标签： htmlcssgoogle-chromefirefoxchart.js

Answer 1

图表中的画布元素具有 2000 像素的固定宽度。