您现在的位置是：首页 > 文章详情

解决移动端两端布局的input+fixed的bug

日期：2018-03-27点击：373收藏

在移动端布局中，会经常出现固定在手机上下两端的页面。

但是fixed定位和软键盘碰上之后，会碰到各种的坑，ios和android上都会遇到。

下面就分享一下如何解决此问题，代码实例如下:

 <!DOCTYPE html> 
 < html lang = "en" > 
 < head > 
 < meta charset = "UTF-8" > 
 < meta name = "viewport" content = "width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" > 
 < title >蚂蚁部落</ title > 
 </ head > 
 < body > 
    < div class = "main" > 
      < p >可以用手机看看</ p > 
      < p >test</ p > 
      < p >软键盘出来后</ p > 
      < p >test</ p > 
      < p >foot是否会错位~</ p > 
      < p >test</ p > 
      < p >test</ p > 
      < input type = "text" placeholder = "我是一个输入框" > 
      < input type = "text" placeholder = "用手机点我啊" > 
    </ div > 
    < div class = "foot" > 
      copyright by linyang 
    </ div > 
 </ body > 
 </ html > 