移动网页答案

【问题标题】：Mobile web page移动网页
【发布时间】：2018-10-26 04:32:18
【问题描述】：

我有一个移动网络聊天应用程序，如屏幕截图所示，我在屏幕底部有一个文本框，它位于页脚和 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)"

}

【问题讨论】：

标签： android css reactjs browser

【解决方案1】：

您已经使用了两次 position 属性，一次是absolute，另一次是relative。尝试仅使用一个值并查看结果。希望它会起作用。

【讨论】：

位置：“相对”，总是覆盖第一个。
尝试使用 absolute 使父元素 relative。如果你不使用 top/left/right/bottom 的值，那么使用 relative [除非你在子元素中使用定位]

【解决方案2】：

我只是通过使用 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 删除此类..

我希望这会有所帮助。

【讨论】：

我认为我们不能使用它。因为键盘的大小因不同的手机型号而异。这个网页也用于桌面

【解决方案3】：

问题已修复。我的主 div 当媒体最大宽度：767px 我给高度 100% ！重要。这是停止 android 网页不显示文本框，因为高度很重要，我删除了它。但这并没有在 IOS 浏览器中引起问题。 https://i.stack.imgur.com/SLPy5.png

【讨论】：