Question

我希望通过打开的移动屏幕使我的html页面缩放。这是我的代码。我已经添加了初始比例1行但它似乎不起作用。我希望图像输入框和单选按钮可以根据打开页面的设备的宽度和高度进行缩放。我使用html / css和bootstrap来制作页面和一些JavaScript。

<!DOCTYPE html>
<html lang="en">
  <head>

    <img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345"> 
    <script>
      function myFunc() {
        var checker = document.getElementById('checkme');
        var sendbtn = document.getElementById('sendNewSms');

        checker.onchange = function(){
          if(this.checked){
            sendbtn.disabled = false;
          } else {
            sendbtn.disabled = true;
          }
        }
      }
    </script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Corendon WI-FI</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <style type="text/css">
      H1 { text-align: center }
      .bs-example{
        margin: 20px;
      }
      body {
        position: fixed;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -35%);
      }
      input, textarea {
        max-width:100%
      };
      img {
        max-width: 100%
      };
    </style>
  </head>
  <body onload="myFunc();">
    <div class="bs-example">
      <div class="bs-example">
        <form>
          <div class="form-group">
            <label for="inputticketnummer">Ticketnummer</label> 
            <input type="ticketnummer" class="form-control" id="inputticketnummer" maxlength="20" placeholder="ticketnummer" size=""  required>
          </div>
          <input type="checkbox"  id="checkme"/> Ik heb de <a href="agreements" class="button">voorwaarden</a> gelezen </label>
          <br><br>
          <input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
        </form></div></form>
      </div>
    </div>
  </body>
</html>

Answer 1

为了使用Bootstrap进行正确的页面缩放，您必须为页面设置网格系统。现在，Bootstrap无法绑定任何东西，因此无法扩展它。

查看文档：{{3}}

Answer 2

更正您的代码，如下面的代码：

<!DOCTYPE html>
   <html lang="en">
   <head>

   <script>
    function myFunc() {
    var checker = document.getElementById('checkme');
    var sendbtn = document.getElementById('sendNewSms');

    checker.onchange = function(){
   if(this.checked){
       sendbtn.disabled = false;
   } else {
       sendbtn.disabled = true;
   }
   }
   }
   </script>

   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Corendon WI-FI</title>
   <link rel="stylesheet"        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
   <style type="text/css">
H1 { text-align: center }
.bs-example{
    margin: 20px;
     }
   /*body{
     position: fixed;
     top: 20%;
     left: 50%;
     transform: translate(-50%, -35%);
   }*/
   input, textarea {
     max-width:100%;
   }
   img {
     max-width: 100%;
   }

   </style>
   </head>
   <body onload="myFunc();">





   <div class="container">

       <div class="row">
           <div class="col-sm-12">
               <img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345"> 
    </div><!--col-sm-12-->
</div><!-- row -->

<div class="row">
    <div class="col-sm-12" onload="myFunc();"></div>
</div><!-- row -->


<div class="row">
    <div class="col-sm-12 bs-example">

        <div class="col-sm-12">
            <div class="form-group">
              <label for="usr">Name:</label>
              <input type="text" class="form-control" id="usr">
            </div>
        </div><!-- col-sm-12 -->

        <div class="col-sm-12">
            <div class="checkbox">
              <label><input type="checkbox" value="">Option 1</label>
            </div>
        </div><!-- col-sm-12 -->

        <div class="col-sm-12">
            <div class="form-group">
              <input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
            </div>
        </div><!-- col-sm-12 -->


    </div><!-- col-sm-12 bs-example -->
</div><!-- row -->


   </div><!-- container -->




   </body>
   </html>

首先，使用bootstrap时总是使用bootstrap类。其次，不要在你的css中使用transform属性，并在你的css中使用固定位置。

Answer 3

您的标记有多处错误。您可以使用bootstrap classes来解决此问题，也可以免费使用它们。

为此重新编写CSS代码：

.form{
    max-width: 400px;
    padding: 15px;
    margin: 0 auto;
}
img{
    margin: 0 auto;
}
.row{
    margin-bottom:10px
}

并替换你的标记：

<body onload="myFunc();">
    <div class="container">
        <div class="form">
            <div class="row">
                <img class="img-responsive" src="corendonwifi.png" alt="Chania" width="460" align="middle" height="345"> 
            </div>
        </div>
        <form class="form">
            <div class="row">
                <label for="inputticketnummer">Ticketnummer</label> 
                <input type="ticketnummer" class="form-control" id="inputticketnummer" maxlength="20" placeholder="ticketnummer" size=""  required> 
            </div>
            <div class="row">
                <input type="checkbox"  id="checkme"/> Ik heb de <a href="agreements" class="button">voorwaarden</a> gelezen
            </div>
            <div class="row">
                <input type="submit" name="sendNewSms" class="btn btn-primary" class="btn-xs" disabled="disabled" id="sendNewSms" value=" ga door " />
            </div>
        </form>
    </div>
</body>

看我的小提琴HERE!

扩展移动版的html页面

3 个答案: