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

У меня есть приложение для мобильного веб-чата, как показано на скриншоте enter image description here , У меня есть текстовое поле в нижней части экрана, которое находится в нижнем колонтитуле, а в браузерах 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)"

}

0
0
35
3

Ответы 3

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

position: "relative", всегда отменять первое.

Mohammed Sirajuddin 26.10.2018 06:41

попробуйте использовать абсолютный, сделав родительский элемент родственник. Если вы не используете значение сверху / слева / справа / снизу Нет смысла использовать относительный [если вы не используете позиционирование в дочернем элементе]

Delowar Hossain 26.10.2018 06:50

Я просто использовал простую логику, используя 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 ..

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

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

Mohammed Sirajuddin 26.10.2018 09:20

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

Другие вопросы по теме