Мобильная веб-страница

Question

У меня есть мобильное приложение для веб-чата, как показано на скриншоте , у меня есть текстовое поле внизу экрана, которое находится в нижнем колонтитуле и в браузерах Android, текстовое поле не фокусируется, тогда какв IOS работает нормально.Может ли кто-нибудь помочь.разработка в ReactJs.

нижний колонтитул: {

zIndex: 2,
bottom: 0,
boxSizing: "border-box",
left: 0,
position: "absolute",
right: 0,
background: "#fff",
position: "relative",
padding: "0 10px",
boxShadow: "0px -1px 10px 0px rgba(0,0,0,.12)"

}

Answer 1

Я просто использовал простую логику, используя jquery. Здесь я использую HTML:

<div></div>
<footer>
  <input type="text"/>
</footer>

Здесь я использую Jquery:

$(document).ready(function(){
    $('div').click(function(){
       $('footer').removeClass('make-top');
   });  
   $('footer > input').click(function(){
       $('footer').addClass('make-top');
   });
});

Здесь CSS:

div{
  height:200px;
}

footer{
    z-index: 2;
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    position: fixed;
    right: 0;
    background: #fff;
    position: relative;
    padding: 0 10px;
    box-shadow: 0px -1px 10px 0px rgba(0,0,0,.12);
    transition:.5s;
} 

@media (max-width:600px){
  .make-top{
    bottom:100px;// Mention the keyboard layout actual height.
  }
}

Просто возьмите код клавиши, пока нажата кнопка «Назад»: и удалите этот класс с помощью jquery.

Надеюсь, это поможет.

Answer 2

Исправлены ошибки.мой основной div, когда media max-width: 767px, я давал высоту 100%!это останавливало веб-страницы Android, чтобы не показывать текстовое поле, так как высота была важна, и я удалил ее.но это не вызывало проблемы в браузерах IOS.https://i.stack.imgur.com/SLPy5.png

Answer 3

Вы дважды использовали свойство position , одно - absolute, а другое - relative.Попробуйте использовать только одно значение и посмотрите результат.Надеюсь, это сработает.