移动网页,input呼出软键盘,布局受影响

shunzizhan
  • 102

移动web页面,采用vh布局,默认撑满全屏,但是当input输入框,获取焦点时,软键盘呼出,可视区域高度减小,页面布局高度受影响,导致字体很小
图片描述
图片描述

回复
阅读 5k
6 个回答

布局上可以使用rem,但是字号大小不建议使用。另外vh布局兼容性差,也不建议使用。当键盘调起时,应该是将页面顶上去或者盖在页面上。楼下说不定有大神能解决你的问题...

media 根据高度适配一下

@media screen and (max-height: 300px) {
    
}

很显然设置自动调整字体大小,可以按照下面的来做

html,body{
    -webkit-text-size-adjust: none;
}

定位,距离bottom为0,试一下

已经解决了,将单位改成px就可以了,蟹蟹各位

花花
  • 1
新手上路,请多包涵

这个主要问题是vh吧,vh是屏幕可视区域高度

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏