如何让HTML页面内容在移动端浏览器中占满整页宽度？

移动端显示异常由两个核心问题导致：

• 缺少移动端视口（viewport）配置：移动端浏览器默认会按980px左右的桌面端宽度渲染页面后再整体缩放，直接造成文字字号过小。
• 组件宽度硬编码为固定值：你给CoinGecko价格挂件写死了width="300"，宽度固定无法随屏幕尺寸拉伸，自然会出现侧边大量空白。另外原代码中width属性末尾多写了一个双引号，属于HTML语法错误，也可能干扰组件正常渲染。

1. 在<head>标签内添加viewport元标签，告诉浏览器以设备实际宽度为基准渲染页面，禁止初始自动缩放，这是所有移动端网页适配的基础配置。
2. 修改挂件的宽度属性：把写死的300px固定宽度改为100%让组件自适应父容器宽度，同时删掉width属性后多余的错误引号。
3. 给body添加少量基础样式，清除浏览器默认的8px外边距，左右留适当内边距，避免组件直接贴在屏幕边缘影响观感。

<html>
<head>
<title>加密货币价格</title>
<meta http-equiv="refresh" content="60" />
<!-- 移动端视口配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  margin: 0;
  padding: 16px;
}
</style>
</head>
<body>
<script src="https://widgets.coingecko.com/coingecko-coin-list-widget.js"></script>
<coingecko-coin-list-widget 
  coin-ids="ethereum,bitcoin,aave,convex-finance,dopex,dydx" 
  currency="usd" 
  locale="en" 
  width="100%">
</coingecko-coin-list-widget>
</body>
</html>

调整完成后，页面会自动适配所有尺寸的移动设备：文字不会被默认缩放变小，价格组件会撑满除去边距外的全部可用宽度，侧边空白问题会完全消失。

内容的提问来源于stack exchange，提问作者chiwal