PC浏览器如何去掉自动缩放

在 UniApp 中实现 PC 端浏览器禁用自动缩放，可以通过以下步骤实现。核心思路是 固定视口比例 + 强制布局约束，以下是具体方案：

一、修改 pages.json 全局配置

在 pages.json 的 globalStyle 中添加以下代码，强制固定页面宽度并禁用缩放：

{  
  "globalStyle": {  
    "h5": {  
      "titleNView": false,  
      "pullToRefresh": false,  
      "disableScroll": true,  
      "rpxCalcMaxDeviceWidth": 999999, // 禁用 rpx 自动换算  
      "rpxCalcBaseDeviceWidth": 1920,   // 设定基准宽度（如 1920px）  
      "rpxCalcIncludeWidth": 1920       // 固定布局宽度  
    }  
  }  
}

二、添加 PC 端专用 CSS 样式

在 App.vue 的 <style> 中添加以下代码，强制固定容器宽度并禁用弹性缩放：

/* 仅针对 PC 端生效 */  
@media screen and (min-width: 768px) {  
  html, body {  
    width: 100%;  
    min-width: 1280px; /* 最小宽度限制 */  
    overflow-x: auto;  /* 允许横向滚动（防止内容被压缩） */  
  }  

  /* 固定主容器宽度 */  
  .container {  
    width: 1280px;  
    margin: 0 auto;  
    min-width: 1280px;  
  }  

  /* 禁用图片自适应缩放 */  
  img {  
    max-width: none !important;  
  }  
}

三、通过 JavaScript 强制锁定缩放（可选）

在 main.js 中添加以下代码，通过监听 resize 事件强制保持布局：

// 仅在 H5 平台生效  
if (process.env.VUE_APP_PLATFORM === 'h5') {  
  let isResizing = false;  

  // 防抖函数  
  const debounce = (func, delay = 300) => {  
    let timeout;  
    return (...args) => {  
      clearTimeout(timeout);  
      timeout = setTimeout(() => func.apply(this, args), delay);  
    };  
  };  

  // 监听窗口变化  
  window.addEventListener('resize', debounce(() => {  
    if (!isResizing && window.innerWidth >= 768) {  
      isResizing = true;  

      // 强制重置布局  
      document.documentElement.style.fontSize = '16px';  
      document.body.style.width = '100%';  

      setTimeout(() => {  
        isResizing = false;  
      }, 500);  
    }  
  }));  
}

四、使用 uni.getSystemInfoSync() 动态判断

在页面逻辑中动态判断设备类型，仅对 PC 端应用特殊样式：

onLoad() {  
  const systemInfo = uni.getSystemInfoSync();  
  if (systemInfo.platform === 'windows' || systemInfo.platform === 'mac') {  
    // PC 端专用逻辑  
    this.isPC = true;  
    // 动态设置样式  
    document.documentElement.style.setProperty('--pc-width', '1280px');  
  }  
}

五、最终效果

1. 页面宽度被固定为 1280px，横向滚动条仅在内容超出时出现
2. 元素尺寸不再随窗口缩放
3. 图片保持原始比例
4. 移动端不受影响（保留响应式布局）

注意事项

1. 如果使用 rpx 单位，建议在 PC 端改用 px
2. 复杂布局建议配合 flex 布局使用
3. 测试时需通过浏览器开发者工具切换设备模式验证效果

通过以上方案，可实现 仅针对 PC 端浏览器禁用自动缩放，同时保留移动端的响应式特性。