Html Chrome设备模式看起来与实际设备不同

我不知道我的CSS样式发生了什么。 输入网格溢出宽度。 在chrome设备模式下，一切看起来都很棒，但在实际设备上就没那么好了

我真的不知道我写的CSS有什么问题

任何帮助都可以。。。我不懂

之前的造型很好，我不知道发生了什么

import styled from "styled-components";

export const DetailsContainer = styled.div`
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 50%;
  margin-bottom: 20px;

  @media screen and (max-width: 800px) {
    width: 100%;
  }
`;

export const StaticDetailsContainer = styled.img`
  width: 100%;
`;

export const FormContainer = styled.div`
  width: 90%;
  margin: auto;

  form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
`;

export const ButtonContainer = styled.button`
  background-color: #2eaaa7;
  color: white;
  font-family: arial, sans-serif;
  font-size: 20px;
  width: 60%;
  height: 40px;
  border: none;

  @media screen and (max-width: 800px) {
    font-size: 15px;
    overflow: hidden;
  }
`;

从“React”导入React；
从“./FormInput/FormInput”导入FormInput；
进口{
按钮容器，
细节容器，
静态细节容器，
模板容器
}来自“./详细信息/详细信息样式”；
从“../../assets/details static.png”导入staticDetails；
类详细信息扩展了React.Component{
状态={
名字：“，
姓氏：“，
电邮：“，
电话：“
};
handleSubmit=事件=>{
event.preventDefault（）；
const{email，phone，firstName，lastName}=this.state；
日志（电子邮件、电话、名字、姓氏）；
//提交到服务器
this.props.handleuisonsubmit（）；
};
handleChange=事件=>{
const{value，name}=event.target；
this.setState（{[name]：value}）；
};
render（）{
返回(
תאם לי שיעור
);
}
}
导出默认详细信息；

这就是chrome设备模式下的情况：

这就是它在实际设备上的方式：

以下是过去的情况：

谢谢

---

解决方案是删除我在index.html中添加的一些链接。

布局有什么具体问题？一堆没有解释的截图信息量不大。对不起，我会编辑这篇文章。但不知何故，它的输入溢出了宽度。。

import React from "react";
import FormInput from "../FormInput/FormInput";
import {
  ButtonContainer,
  DetailsContainer,
  StaticDetailsContainer,
  FormContainer
} from "../Details/Details-styles";
import staticDetails from "../../assets/details-static.png";

class Details extends React.Component {
  state = {
    firstName: "",
    lastName: "",
    email: "",
    phone: ""
  };

  handleSubmit = event => {
    event.preventDefault();
    const { email, phone, firstName, lastName } = this.state;
    console.log(email, phone, firstName, lastName);
    //submit to server
    this.props.handleUIOnSubmit();
  };

  handleChange = event => {
    const { value, name } = event.target;
    this.setState({ [name]: value });
  };

  render() {
    return (
      <DetailsContainer>
        <StaticDetailsContainer src={staticDetails} />
        <FormContainer>
          <form onSubmit={this.handleSubmit}>
            <FormInput
              name="lastName"
              type={"text"}
              placeholder="שם משפחה"
              value={this.state.lastName}
              handleChange={this.handleChange}
            />
            <FormInput
              name="firstName"
              type="text"
              placeholder={"שם פרטי"}
              value={this.state.firstName}
              handleChange={this.handleChange}
            />
            <FormInput
              name="phone"
              type="phone"
              placeholder={"טלפון"}
              value={this.state.phone}
              handleChange={this.handleChange}
            />
            <FormInput
              name="email"
              type="email"
              placeholder={'דוא"ל'}
              value={this.state.email}
              handleChange={this.handleChange}
            />
            <ButtonContainer type="submit">תאם לי שיעור</ButtonContainer>
          </form>
        </FormContainer>
      </DetailsContainer>
    );
  }
}

export default Details;