如何在React js中修复移动设备上的网站高度和宽度？

Question

我是 React JS 的新手，我写了一个简单的网站，在网络浏览器上看起来不错，但是，我的移动外观非常糟糕。由于某种原因，移动设备上的高度是原来的两倍，并且我看到一个巨大的滚动条，其中一个。我不需要和b。没有内容，所以不知道为什么会显示。

这是我的CSS：

.App {
  display: flex;
  min-width:  768px;
  height: 100%;
  min-height: 100vh;
  background-color: #cbe6ef;
  flex-direction: column;

  @media only screen and (min-width : 768px) {
   width: 50%;
   height: 50vh;
 }

 /* Medium Devices, Desktops */
 @media only screen and (min-width : 992px) {
   width: 100%;
 }
}

我的App.js：

function App() {

  return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="testing" element={<BetaTesting />} />
      </Routes>
  );
}

我的主屏幕：

const Home = () => {
    const mystyle = {
    backgroundImage: "url(/background.png)",
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat"

  }

    const [cookies, setCookie] = useCookies(['viewed_cookie_policy']);
    return (
    <div style={ mystyle } className="App">
      <Header />
      <News />
            <Footer />
            {!cookies.viewed_cookie_policy ? <Consent /> : null}
    </div>
    );
};

这是它在手机上的样子：

如果有人能告诉我我做错了什么那就太好了！

Answer 1

如果您认为以下分析+修复不能解决您的问题，请编辑您的原始问题以包含有关您想要实现的目标的更多详细信息。

• 您指定

  min-width: 768px;

  作为默认宽度，这适用于移动设备（在您的第一个媒体查询中宽度仅设置为 50%）
• 高度保持不变

  50vh

  即使在桌面上

以下是更新后的代码。

.App {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: #cbe6ef;
  flex-direction: column;

  @media only screen and (min-width : 768px) {
    width: 50%;
    min-height: 50vh;
    height: 50vh;
  }

  /* Medium Devices, Desktops */
  @media only screen and (min-width : 992px) {
    width: 100%;
    
    /* Uncomment the below lines if you wish to set your
       height over the whole screen on desktops */
    /* -- */
    /* height: 100%; */
    /* min-height: 100vh; */
  }
}