Question

我正在使用一个简单的半引导/一半由某人登录模板设计。现在它通过Web浏览器打开：

但是当我通过我的移动设备打开它时，它会以这种方式加载：

我希望它以这样的特写方式打开：

现在这里是我的html和css：

body {
  background: #eee !important;
}

.form-signin {
  max-width: 380px;
  padding: 15px 35px 30px;
  margin: 20px auto;
  background-color: #fff;
  border: 1px round rgba(0, 0, 0, 0.1);
}

.form-signin .checkbox {
  margin-bottom: 30px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  font-size: 16px;
  height: auto;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="text"] {
  margin-bottom: -1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.form-signin-heading {
  color: #777;
}

.social-box{
  margin: 0 auto;
  padding: 20px 38px 0 38px;
}
.social-box a{
  font-weight:bold;
  font-size:18px;
  padding:8px;
}
.social-box a i{
  font-weight:bold;
  font-size:20px;
}
.newborder {
  border-bottom: 1px #ccc solid;
  margin-top: 30px;
  margin-bottom: 30px;
}
.omb_loginOr {
  position: relative;
  font-size: 1.5em;
  color: #aaa;
  margin-top: 1.5em;
  margin-bottom: 2.2em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.omb_loginOr .omb_hrOr {
  background-color: #cdcdcd;
  height: 1px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.omb_loginOr .omb_spanOr {
  display: block;
  position: absolute;
  left: 50%;
  top: -0.3em;
  margin-left: -1.5em;
  background-color: white;
  width: 3em;
  text-align: center;
}

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Bootstrap Snippet: Login Form</title>
        <link rel="stylesheet" href="css/lstyle.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  </head>

  <body>

      <div class="container">
        <div class="form-signin">
    <form>
      <h2 class="form-signin-heading text-center"><i class="fa fa-tint fa-fw"></i>Hello</h2>


      <div class="social-box">
        <div class="row mg-btm">
          <div class="col-md-12">
            <a href="#" class="btn btn-primary btn-block">
              <i class="fa fa-facebook fa-fw"></i>    Log in
            </a>
          </div>
        </div>
      </div>

      <div class="newborder"></div>


      <input type="text" class="form-control" name="username" placeholder="E-mail" required="" autofocus="" />
      <input type="password" class="form-control" name="password" placeholder="Password" required=""/>
      <label class="checkbox text-right">
        <input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember me
      </label>
      <button class="btn btn-lg btn-info btn-block" type="submit">Log in</button>
    </form>


  <div class="row omb_loginOr ">
      <hr class="omb_hrOr">
      <span class="omb_spanOr">or</span>
  </div>


        <form>

          <div class="alert alert-info"><p>No registration?</p></div>
          <input type="text" class="form-control" name="username" placeholder="E-mail" required="" autofocus="" />
          <input type="password" class="form-control" name="password" placeholder="Password required=""/>

          <button class="btn btn-lg btn-info btn-block" type="submit">Register me & log in</button>
        </form>

</div>




  </div>
    
    
    
    
    
  </body>
</html>

提前非常感谢！

Answer 1

将<meta name="viewport" content="width=device-width, initial-scale=1">放入<head>部分。它会使页面正确适合您的屏幕。希望这会有所帮助。

通过CSS制作简单的页面响应

1 个答案: