使数据适合屏幕..使输出响应答案

【问题标题】：Fit data to screen..making output responsive使数据适合屏幕..使输出响应
【发布时间】：2016-10-21 04:49:48
【问题描述】：

我正在尝试使用我使用 Angularjs 和 HTML 的 ionic 框架制作移动应用程序。还使用 AJAX 来调用我的 web 服务。我是编码和android开发的新手。我需要帮助来制作输出响应，其中输出大小根据屏幕大小进行调整，我该怎么做。任何帮助将不胜感激！下面是我的代码。

function myCall() {
  var value1 = document.getElementById('Text1').value;
  var value2 = document.getElementById('Text2').value;
  var result = "";
  var request = $.ajax({
    url: "http://192.168.0.103/PdfReportWebservice.asmx/LoginDetails?",
    data: { UserID: value1, Password: value2 },
    type: "GET",
    dataType: "JSON"
  });

  request.done(function (msg) {
    result = JSON.stringify(msg);
    $.each(msg, function (i, val) {
      if (val.Result == "Login successful") {
        window.location = ("http://192.168.0.103/PdfReport.htm");
      }
      else {
        window.location = ("http://192.168.0.103/Login.htm");
        alert("Login failed");
      }
    });
  });
  request.fail(function (jqXHR, textStatus) {
    alert("Request failed: " + textStatus);

  });
}

form {
  border: 3px solid #f1f1f1;
}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}


.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}
body h2{
  color:darkblue;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

<script type="text/javascript" src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<form > 
  <div class="imgcontainer">
    &nbsp;</div>
  <div class="container">
    <label><b>Username</b></label>
    <input id="Text1" type="text"/>
    <label><b>Password</b></label>
    <input id="Text2" type="text"/>
    <button type="submit" value="submit" onclick="myCall()">login</button>  

    <input type="checkbox" checked="checked"/> Remember me
  </div>        
  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>

  </div>
  <div id="mybox">
  </div>
</form>

【问题讨论】：

您上面的代码与角度无关，主要是jQuery。请使用 jQuery 和 ionic 正确标记它，以获得您问题的当前收视率。

标签： jquery html css angularjs responsive-design

【解决方案1】：

我可以看到缺少的一件事是视口：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

我在下面的代码中添加了相同的内容，希望对您有所帮助。

function myCall() {
  var value1 = document.getElementById('Text1').value;
  var value2 = document.getElementById('Text2').value;
  var result = "";
  var request = $.ajax({
    url: "http://192.168.0.103/PdfReportWebservice.asmx/LoginDetails?",
    data: { UserID: value1, Password: value2 },
    type: "GET",
    dataType: "JSON"
  });

  request.done(function (msg) {
    result = JSON.stringify(msg);
    $.each(msg, function (i, val) {
      if (val.Result == "Login successful") {
        window.location = ("http://192.168.0.103/PdfReport.htm");
      }
      else {
        window.location = ("http://192.168.0.103/Login.htm");
        alert("Login failed");
      }
    });
  });
  request.fail(function (jqXHR, textStatus) {
    alert("Request failed: " + textStatus);

  });
}

form {
  border: 3px solid #f1f1f1;
}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}


.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}
body h2{
  color:darkblue;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}

<html>
  <head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <script type="text/javascript" src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  </head>
  <body>
    <form > 
      <div class="imgcontainer">
        &nbsp;</div>
      <div class="container">
        <label><b>Username</b></label>
        <input id="Text1" type="text"/>
        <label><b>Password</b></label>
        <input id="Text2" type="text"/>
        <button type="submit" value="submit" onclick="myCall()">login</button>  

        <input type="checkbox" checked="checked"/> Remember me
      </div>        
      <div class="container" style="background-color:#f1f1f1">
        <button type="button" class="cancelbtn">Cancel</button>
        <span class="psw">Forgot <a href="#">password?</a></span>

      </div>
      <div id="mybox">
      </div>
    </form>
  </body>
</html>

【讨论】：