WordPress为Foogallery设html缩放90%致移动端异常 如何仅在移动端禁用

• 首先移除你之前写的无设备范围限制的全局缩放代码：

/* 删除这段无差别生效的代码 */
html {
  zoom: 90%;
}

• 替换成带设备断点判断的缩放规则，仅在桌面端触发90%缩放效果：

/* 断点可根据你的站点实际布局调整，通用分界为768px，即宽度≥768px判定为非移动端 */
@media (min-width: 768px) {
  html {
    zoom: 90%;
  }
}

• 追加一段移动端兜底规则，强制重置缩放值，避免残留的全局规则引发购物车错位、头部布局崩坏的问题：

/* 宽度<768px的移动端不应用任何缩放 */
@media (max-width: 767.98px) {
  html {
    zoom: 100%;
  }
}

额外说明：当初为了实现Foogallery双栏布局直接套全局缩放的操作是不必要的，不仅会牵一发动全身破坏现有头部、购物车模块的布局，也会影响页面原生的缩放适配能力。Foogallery插件本身自带响应式列数配置功能，直接在插件后台分别设置桌面端、移动端的画廊显示列数，完全不需要修改全局HTML的缩放参数，就能从根源上解决布局适配问题，不会连带产生额外的样式bug。

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