禁用移动 html 缩放 (wordpress)

Question

所以我将http://augustesoesastro.com/press/ 我的网站设置为 90%，因为我想为画廊设置 2 列。因为我不知道如何使用Foogallery。

使用：

html {

    zoom: 90%; 
}

但是代码破坏了我的标题，尤其是移动设备上放错位置的购物车图标。 有人知道如何仅在移动设备上禁用代码吗？

Answer 1

您可以在 css 中使用媒体选择器

@media (max-width: 480px) {
  
    html {
        zoom: 100%; 
    }
  
}

@media (min-width: 481px) {

    html {
        zoom: 90%; 
    }

}

更新：

对于 2 列，我们可以覆盖平板电脑和手机的 css 类

@media (max-width: 1321px) {
  
    .fg-item { 
        width: 38vw;
    }
  
}

38vw - 所有低于 1321 像素的屏幕的最佳值

您可以使用min-width max-width 调整其他范围的其他值。