Мягкая клавиатура изменяет размер мобильного веб при появлении - PullRequest
Новая
       13

Мягкая клавиатура изменяет размер мобильного веб при появлении

0 голосов
/ 14 октября 2018

До появления клавиатуры

После появления клавиатуры

Мне нужна клавиатура, чтобы вообще не изменять размер макета, просто чтобы он отображалсяв верхней части страницы, и пусть пользователь прокручивает вверх и вниз.Вот мой код 

<html>
<header>
<title>Test Page</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0;padding:0;}
</style>
</header>
<body>
<div style='float:left;width:100%;height:20%;background:red;'></div>
<div style='float:left;width:100%;height:60%;background:pink;'></div>
<div style='float:left;width:100%;height:20%;background:tan;'><input type='text' style='float:left;height:30%;width:50%;'></div>
</body>
</html>

1 Ответ

0 голосов
/ 14 октября 2018

А вот и ответ 

$(document).ready(function () {
  'use strict';

  var orientationChange = function () {
    var $element = $('html');
    $element.css('height', '100vh'); // Change this to your own original vh value.
    $element.css('height', $element.height() + 'px');
  };

  var s = screen;
  var o = s.orientation || s.msOrientation || s.mozOrientation;
  o.addEventListener('change', function () {
    setTimeout(function () {
      orientationChange();
    }, 250);
  }, false);
  orientationChange();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...