Elementor网站手机端缩放异常，求禁用缩放的CSS代码

要彻底解决你遇到的弹窗关闭后缩放状态卡住、垂直图片滚动组件缩放异常的问题，需要结合viewport元标签和CSS规则来完全禁用移动端缩放功能，以下是具体实现步骤：

1. 配置Viewport元标签 #

首先确保网站头部添加正确的viewport设置，这是控制移动端缩放的核心：

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

• user-scalable=no：直接禁止用户手动触发缩放
• maximum-scale=1.0：限制页面最大缩放比例为1倍

如果使用Elementor Pro搭建，可通过「自定义HTML」组件将这段代码注入网站<head>区域，或在主题的functions.php文件中通过代码添加。

2. 添加CSS规则增强限制 #

针对部分安卓浏览器的兼容问题，补充以下CSS代码阻止触摸缩放行为：

/* 禁用双指缩放、双击缩放 */
html, body {
  touch-action: pan-x pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 修复Elementor弹窗的缩放触发问题 */
.elementor-modal {
  touch-action: none;
}

• touch-action: pan-x pan-y：仅允许页面横向、纵向滚动，禁用缩放等其他触摸交互
• 禁用用户选择和触摸呼出菜单，进一步避免触发缩放的可能
• 针对Elementor弹窗单独设置touch-action: none，确保弹窗本身不会触发缩放逻辑

验证说明 #

• 请在真实安卓设备上测试效果，部分模拟器可能存在行为偏差
• 该方案会完全禁用移动端所有缩放操作，符合你当前的需求

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