Блог

Главная - Вопросы по программированию - Подгонка данных к экрану..адаптация вывода

Подгонка данных к экрану..адаптация вывода

#jquery #html #css #angularjs #responsive-design

#jquery #HTML #css #angularjs #адаптивный дизайн

Вопрос:

Я пытаюсь создать мобильное приложение с использованием ionic framework, в котором я использовал Angularjs и HTML.Также использовал AJAX для вызова моих веб-сервисов. Я новичок в программировании и разработке 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">
    amp;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>

Комментарии:

1. приведенный выше код не имеет ничего общего с angular, в основном это jQuery. Пожалуйста, правильно пометьте его с помощью jQuery и ionic , чтобы получить текущую аудиторию для вашего вопроса.

Ответ №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">
        amp;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>