javascript - 为什么我的 React Web App 在某些移动设备上看起来有很大不同？

Question

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

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

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

第一部分的预期外观:

第一部分的预期外观:

例如，这里有一些照片显示它在我的 iPhone 11 上看起来有多破:

第一部分的奇怪外观(按钮折叠):

一团糟——所有部分都折叠在彼此之上:

我已经尝试了所有我能想到的:

• 我试过使用纯 css 而不是样式化组件

• 我正在使用 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

这是一个相当困惑的帖子，但这是我最后的选择 - 非常欢迎任何建议，我会尽我所能获得所有帮助。 最诚挚的问候和感谢!

Answer 1

为了将来引用，这个问题通过改变一些 CSS 解决了:

• 在 firstContainer 类中将高度更改为最小高度。
• 去除高度:100%在正文中。
• 将字体粗细从 700 更改为 600。
• 将高度、宽度替换为最小高度，最小宽度取决于要求。
• 在 child 中将 flex: 1 1 0 替换为 width: 50%。