Передвижная панель изменения размера

Я делаю отзывчивый веб-сайт, и у меня есть эта проблема. Все работает хорошо, пока я не выберем [input type = "text" ] и выйдет на клавиатуре, весь сайт будет изменен, так как размер экрана - это только часть над клавиатурой. Я просто хочу, чтобы этот mantain был нормальным. Я попробовал все решение, предложенное в stackoverflow, на другом форуме, но похоже, что работа с булочкой ничего не работает.

Кто-нибудь знает, как это исправить?

<head>
  <title>SchoolIn</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

//other code

UPDATE: Я попытаюсь объяснить лучше.

У меня есть раздел главы

//other code
<div class="head">
  //Here is some text 
</div>
//other code

Затем раздел содержимого

//other code
<div class="container">
  <div class="content">
    //other code
    <input type="text" ...... />
    <input type="password" ..... />
    <input type="submit" ..... />
  </div>
</div>
//other code

Весь элемент в процентах отсутствует в пикселях.

Когда keyboad выдает заголовок, контейнер и содержимое div перенастраиваются, вместо этого поля ввода и кнопка не работают. В любом случае они вышли из контейнера, потому что контейнер меньше, и они сохраняют первоначальный размер. Я не знаю, понял ли я сам себя.

Вопрос такой же, как я могу заставить его оставаться в исходном размере, когда клавиатура выходит?

Ответ 1

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

Попробуйте этот кусок html. Я использую его для каждой моей страницы, и он всегда делал то, что должен. Возможно, ваш не работает из-за отсутствующего атрибута минимальной шкалы.

Ответ 2

Хорошо, я заработал, по крайней мере частично. Проблема для меня заключалась в том, что я сделал HTML и BODY высотой 100%, поэтому, когда клавиатура выходит, высота становится частью над ней. Если я не объявляю какую-либо высоту, она отлично работает.

html, body{
  height: 100%;
}

Я сказал частично, потому что мне нужна высота устройства, поэтому я могу сделать пропорцию с элементами внутри страницы. Если я не объявляю высоту, содержимое страницы будет отображаться на некоторых смартфонах на половину экрана, в другом случае. Я уже делал перерыв с медиа-запросом, но я не могу сделать это по одному для каждого разрешения. Я создал несколько диапазонов (например: max-width: 320 ---- min-width: 321, max-width: 480.... и т.д.).

Снова какие-либо идеи о том, как решить проблему с высотой?

Ответ 3

Нет <meta name='viewport'/> или процентные исправления, работающие в моем случае (браузер Android 2.3), поэтому я оказался в этом CSS:

body {
    min-height: 350px;
}

Вам также нужно сделать это для чего-нибудь с height:auto.

Это взломать, но он по крайней мере делает сайт пригодным для использования в этом случае. Как только пользователь попытается увеличить масштаб, он выскочит из него.