如何调整Google可编程搜索引擎以提升移动端适配性？

问题说明 #

• 桌面端显示正常：
• 移动端出现压缩变形：
• 已尝试调整固定宽高，未解决问题

解决方案 #

1. 添加响应式CSS样式

给搜索控件容器添加自适应样式，覆盖默认的固定宽度限制：

/* 全局容器自适应 */
.gsc-control-cse {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding: 0 12px;
}

/* 搜索框宽度自适应 */
.gsc-search-box {
  width: 100% !important;
}

/* 输入框与按钮适配 */
.gsc-input-box {
  width: calc(100% - 90px) !important;
}

2. 调整搜索引擎后台布局设置

1. 登录Google可编程搜索引擎管理后台
2. 进入对应搜索引擎的「外观」配置页
3. 选择「响应式」布局选项（而非固定宽度）
4. 保存设置后，重新复制嵌入代码到页面

3. 确保页面视口设置正确

检查页面头部是否包含视口元标签，没有的话添加：

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

4. 检查父容器限制

确认搜索控件所在的父级容器没有设置固定宽度、overflow: hidden或其他会导致压缩的样式，如有则移除或修改为自适应属性。

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