Я делаю отзывчивый веб-сайт, и у меня есть эта проблема. Все работает хорошо, пока я не выберем [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 перенастраиваются, вместо этого поля ввода и кнопка не работают. В любом случае они вышли из контейнера, потому что контейнер меньше, и они сохраняют первоначальный размер. Я не знаю, понял ли я сам себя.
Вопрос такой же, как я могу заставить его оставаться в исходном размере, когда клавиатура выходит?
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Попробуйте этот кусок html. Я использую его для каждой моей страницы, и он всегда делал то, что должен. Возможно, ваш не работает из-за отсутствующего атрибута минимальной шкалы.
Хорошо, я заработал, по крайней мере частично. Проблема для меня заключалась в том, что я сделал HTML и BODY высотой 100%, поэтому, когда клавиатура выходит, высота становится частью над ней. Если я не объявляю какую-либо высоту, она отлично работает.
html, body{
height: 100%;
}
Я сказал частично, потому что мне нужна высота устройства, поэтому я могу сделать пропорцию с элементами внутри страницы. Если я не объявляю высоту, содержимое страницы будет отображаться на некоторых смартфонах на половину экрана, в другом случае. Я уже делал перерыв с медиа-запросом, но я не могу сделать это по одному для каждого разрешения. Я создал несколько диапазонов (например: max-width: 320 ---- min-width: 321, max-width: 480.... и т.д.).
Снова какие-либо идеи о том, как решить проблему с высотой?
Нет <meta name='viewport'/> или процентные исправления, работающие в моем случае (браузер Android 2.3), поэтому я оказался в этом CSS:
body {
min-height: 350px;
}
Вам также нужно сделать это для чего-нибудь с height:auto.
Это взломать, но он по крайней мере делает сайт пригодным для использования в этом случае. Как только пользователь попытается увеличить масштаб, он выскочит из него.