为什么我的 React Web App 在某些移动设备上看起来完全不同？答案

【问题标题】：Why does my React Web App look way different on some mobile devices?为什么我的 React Web App 在某些移动设备上看起来完全不同？
【发布时间】：2021-03-09 18:03:16
【问题描述】：

这是我有史以来的第一个问题，因此对于给您带来的任何不便，我深表歉意:)

我一直在使用样式组件在 React 中编写一个静态网站，除了在某些移动设备上，一切看起来都应该如此。出于某种原因，几乎所有 div 层都在彼此之上，并且按钮无法正确显示 - 最糟糕的是，损坏的样式之间似乎没有一致性。它适用于某些设备（例如 iPhone XS），但不适用于其他设备（iPhone 11） - 我不知道为什么。

以下是它在某些移动设备上的外观图片：

第一部分的预期外观：

下面是一些照片，例如它在我的 iPhone 11 上的损坏程度：

第一部分的奇怪外观（按钮已折叠）：

一团糟——所有部分相互重叠：

我已经尝试了所有我能想到的东西：

我尝试过使用纯 css 而不是 styled-components
我正在使用 Gatsby，所以我也尝试过重新安装 gatsby 和 gatsby-cli 然后创建一个干净的项目
我尝试过部署一个干净的 React 应用程序（没有 gatsby），只使用
第一部分的代码（不过，按钮看起来很奇怪）
我已尝试更改按钮的 CSS（仅用于测试
在重构所有内容之前错误来自哪里 - 仍然，没有效果）
我尝试通过 Vercel（而不是 Netlify）进行部署
我使用https://autoprefixer.github.io 来确保我所有的不同浏览器支持代码 CSS。

这些尝试都没有改变任何东西。

我现在不知道该去哪里。有什么想法吗？

作为参考，这里是 Button 组件 - 我是不是搞砸了？（对不起，真的很丑）：

import React from "react";
import styled from "styled-components";

export default function Button({ content }) {
  return (
    <Container>
      <B href="#contactSection">{content}</B>
    </Container>
  );
}

const Container = styled.div`
  margin-top: 60px;

  width: 240px;
  height: 55px;

  background-color: rgb(35, 190, 115);
  border-radius: 30px;
  -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-transition-duration: 0.3s;

  -o-transition-duration: 0.3s;

  transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);

  &:hover {
    cursor: pointer;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  @media (max-width: 960px) {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
  }
`;

const B = styled.a`
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
`;

这里是 GitHub 存储库的链接：https://github.com/ErikBachRyhl/worklay-website

这是一个非常混乱的帖子，但这是我最后的手段 - 非常欢迎任何建议，我会尽我所能获得帮助。提前致以最诚挚的问候和感谢！

【问题讨论】：

您的代码对我来说看起来不错...您确定在这些移动设备上测试相同的浏览器吗？如果设备相同，操作系统版本相同，浏览器相同，那么css看起来不同是没有意义的
很确定这是由与您的代码完全无关的东西引起的，例如积极缓存的资产或类似的东西，尽管 Gatsby 应该注意这一点。
很难发现这个问题，你能把你的代码发布在 GitHub Page 上让我们看到整个事情，似乎不仅仅是按钮的问题。
尝试将你的firstContainer高度改为min-height，删除body中的height: 100%，你的button的font-weight为600，尝试不同的字体，看看是否更好。
很高兴我能帮上忙，我做了一个回答，这样我可以帮助别人。

标签： javascript css reactjs styled-components

【解决方案1】：

为了将来参考，这个问题通过改变一些 CSS 来解决：

在 firstContainer 类中将高度更改为最小高度。
移除高度：100% 在正文中。
将字体粗细从 700 更改为 600。
将 height、width 替换为 min-height、min-width 取决于要求。
在儿童中将 flex: 1 1 0 替换为 width: 50%。

【讨论】：