能否通过CSS或JS伪装屏幕宽度以触发指定@media媒体查询规则？

针对你给出的现有媒体查询规则：

@media(max-width: 992px){
    .sidebar-nav{
        display: none;
    }
}

你需要在1200px宽度的屏幕上触发该规则，可直接使用以下两种可行方案，无需修改现有任何@media适配规则：

方案1：固定视口布局宽度（推荐） #

直接在页面<head>标签内添加如下视口配置：

<meta name="viewport" content="width=900">

该配置会强制浏览器将页面布局视口的宽度固定为900px，与设备实际物理宽度无关。此时媒体查询会按900px的宽度进行判定，自动满足max-width: 992px的触发条件，你现有所有适配小屏的样式都会正常生效，不需要额外修改其他代码。

方案2：JS劫持宽度检测（兼容性更强） #

如果部分旧版桌面浏览器不支持viewport固定宽度，可以用JS强制修改窗口宽度的返回值，同时固定页面容器宽度：

1. 注入JS代码：

// 强制模拟窗口宽度为900px
Object.defineProperty(window, 'innerWidth', { get: () => 900, configurable: true });
Object.defineProperty(window, 'outerWidth', { get: () => 900, configurable: true });
// 触发窗口 resize 事件，让所有媒体查询重新计算匹配结果
window.dispatchEvent(new Event('resize'));

2. 配套添加全局CSS：

body {
  width: 900px;
  margin: 0 auto;
  overflow-x: hidden;
}

该方案会让所有基于窗口宽度的判断逻辑都按照900px执行，完全兼容你现有的所有适配规则。

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