如何在移动设备上强制显示网站的桌面端视图

完全可以仅通过HTML和CSS实现该需求，不需要引入JavaScript代码，核心逻辑是强制浏览器按照桌面端的固定宽度渲染页面，不做移动端自适应适配。

实现步骤 #

• 第一步：配置HTML viewport元标签
  替换原有的自适应viewport配置，设置为和你桌面端站点设计宽度一致的固定值，示例代码如下（请将1200替换为你的站点实际桌面设计宽度）：

<meta name="viewport" content="width=1200, initial-scale=1.0">

如果需要禁止用户手动缩放页面，可以补充缩放限制参数：

<meta name="viewport" content="width=1200, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 第二步：CSS设置全局固定宽度
  给页面根容器设置和viewport宽度一致的固定值，避免内容自适应收缩：

/* 全局宽度配置 */
html, body {
  min-width: 1200px;
  width: 1200px;
  margin: 0 auto; /* 可选配置，超宽屏设备下页面居中显示 */
}

常见失效原因排查 #

如果配置后未达到预期效果，可对照以下问题自查：

• 已存在的响应式媒体查询（@media (max-width: xxx)）未删除，小屏幕下触发移动端样式覆盖了固定宽度配置
• 全局容器设置了width: 100%、max-width: 100vw这类自适应属性，覆盖了固定宽度设置
• 页面中存在多个重复的viewport元标签，配置冲突导致规则不生效

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