修复了滚动时移动设备上的背景缩放答案

【问题标题】：Fixed background zooms on mobile when scrollling修复了滚动时移动设备上的背景缩放
【发布时间】：2020-07-21 15:59:54
【问题描述】：

当我在手机上打开我的应用并向下滚动时，它会放大一点，如果我回到页面顶部，它会重新调整大小。

主页和关于页面都会发生这种情况。在 devTools 上没有错，但正如我在手机上所说的那样，它给出了这个问题。

我将背景设置为cover，并将位置设置为center center，但没有任何改变。

.main-home {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url('./Images/adils-photography-gmo6Ok9G0U8-unsplash.jpg');
  
  z-index: -1;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  height: 95vh;
}

这是应用网址：https://restaurant-finder-123.netlify.app/ 它的存储库：https://github.com/mugg84/RestaurantFinder.git

感谢您的帮助

【问题讨论】：

我认为这可能是与视口大小和响应式设计有关的 CSS 问题。您在哪些移动浏览器（和版本）上测试并重现了此问题？
@DrewReese 我在两部不同的手机上都使用了 Chrome。一个版本 84.0.4147.89 另一个版本 83.0.4103.106

标签： css reactjs responsive-design

【解决方案1】：

尝试在您的 html 元标记中添加“user-scalable=0”

像这样：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />

【讨论】：

不，还是一样的问题