Html 当在较小比例的浏览器窗口中打开时，页面显示放大

我正在尝试使用CreateReact应用程序构建注册/登录页面表单。 到目前为止，我开发了一个使用css网格的web布局。我在显示器上开发了它，分辨率为1920 x 1080。当我在一个分辨率更小的屏幕（1536 x 864）上打开同一页时，我发现它有点放大了，所以当我缩小到80%时，它又恢复正常了。

我曾尝试在CreateReact应用程序中更改index.html的视口，但没有更改

HTML:

<div className={classes.wrapper}>
        <div className={classes.headerMessage}><h3>Welcome to the online-bartering system</h3></div>
        <div className={classes.insideWrapper}>
          <div className={classes.wrapperLeft}>
            <form onSubmit={this.signInHandler}>
              <h2 style={{ textAlign: 'center', color: "blue", display: "inline" }}>Sign In</h2> <img src={SignIn} />
              <h6 style={{ textAlign: 'center' }}>Already registered ? Then enter username and password below: </h6>
              <div className={classes.wrapperLeft_content}>
                <label>
                  Username <input type="text" name="nameLogin" placeholder="username" onChange={this.handleChange} />

                </label>
                <div style={{ color: "red" }}>{this.state.nameLoginErr}</div>
                <label>
                  Password <input type="password" name="passwordLogin" placeholder="password" onChange={this.handleChange} />
                </label>
                <div style={{ color: "red" }}>{this.state.passwordLoginErr}</div>
                <button type="submit" id="signIn">Sign in</button>
              </div>
            </form>

          </div>
          <div className={classes.wrapperRight}>
            <h2 style={{ textAlign: 'center', color: "red" }}>Sign Up</h2>
            <h6 style={{ textAlign: 'center' }}>Not registered yet ? Then, please provide your user information below: </h6>

            <div className={classes.wrapperRight_content}>
              <form onSubmit={this.signUpHandler}>
                <label>
                  Username* <input type="text" name="name" placeholder="username" value={this.state.name} onChange={this.handleChange} />
                </label>
                <div style={{ color: 'red' }}>{this.state.nameErr}</div>
                <label>
                  Password* <input type="password" name="password" placeholder="password" value={this.state.password} onChange={this.handleChange} />
                </label>
                <div style={{ color: "red" }}>{this.state.passwordErr}</div>
                <label>
                  Repeat Password* <input type="password" name="repeatPassword" placeholder="repeat password" value={this.state.repeatPassword} onChange={this.handleChange} />
                </label>
                <div style={{ color: "red" }}>{this.state.passwordErr}</div>
                <label>
                  E-mail* <input type="text" name="email" placeholder="email" value={this.state.email} onChange={this.handleChange} />
                </label>
                <div style={{ color: "red" }}>{this.state.emailErr}</div>
                <button type="submit" id="signUp">Sign Up</button>
              </form>

            </div>


          </div>
        </div> 
        <div className={classes.advertImages} >


            <div> 
            <img src={ManImage} /> 
            </div>
            <div> 
            <img src={WatchImage} />
            </div>
            <div> 
            <img src={Cars} />
            </div>
            <div> 
            <img src={Smartphones} /> 
            </div>

        </div>

      </div>

      <div className={classes.footer}> 

---

我希望web布局会根据屏幕分辨率进行调整，因为在create react app index.html元视口中可用。

将这一行添加到index.html，以便它在每个屏幕和每个事件上保持固定，就像输入焦点一样触发

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

---

将这一行添加到index.html中，以便它在每个屏幕和每个事件上保持固定，就像输入焦点一样触发

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

添加完整的html，渲染的html更好（即使使用fiddle也更好）。根据我的经验，大多数情况是因为元视口被遗忘或不正确，请仔细检查。其他时候的问题是大小单位。。。但是对于提供的信息，我不确定。添加完整的html，呈现的更好（甚至使用fiddle也更好）。根据我的经验，大多数情况是因为元视口被遗忘或不正确，请仔细检查。其他时候的问题是大小单位。。。但是根据提供的信息，我不确定。我已经在create react app project index.html中有了这个meta，它无法解决问题。那么也许你可以添加它在两个屏幕上的屏幕截图？嗨，我添加了它在不同屏幕分辨率下的图片。我已经在create react app project index.html中有了这个meta，这并不能解决问题。那么也许你可以在两个屏幕上都添加它的屏幕截图？嗨，我添加了不同屏幕分辨率下的图片。